【笔记】前后端互通中前端登录无响应

后来的前情提要 :

后端的ip地址在本地测试阶段应该设置为localhost

前端中写cors的配置  后端也要写cors的配置 且两者的url都要为localhost

前端写的baseUrl是指定对应的后端的ip地址以及端口号 很重要 在本地时后端的IP的地址也必须为本地的

F12的网页报错是;

连接超时

xhr.js:167Uncaught (in promise)

  1. AxiosError {message: 'timeout of 10000ms exceeded', name: 'AxiosError', code: 'ECONNABORTED', config: {…}, request: XMLHttpRequest, …}
    1. code: "ECONNABORTED"
    2. config: {transitional: {…}, adapter: Array(2), transformRequest: Array(1), transformResponse: Array(1), timeout: 10000, …}
    3. message: "timeout of 10000ms exceeded"
    4. name: "AxiosError"
    5. request: XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 10000, withCredentials: false, upload: XMLHttpRequestUpload, …}
    6. stack: "AxiosError: timeout of 10000ms exceeded\n at XMLHttpRequest.handleTimeout (http://localhost:5173/node_modules/.vite/deps/axios.js?v=d1865a9f:1447:14)"
    7. [[Prototype]]: Error

还是跨域的问题

我在前端vite.config.js写的cors

import { defineConfig } from 'vite';

import vue from '@vitejs/plugin-vue';

export default defineConfig({

  plugins: [vue()],

  server: {

    proxy: {

      '/api': {

        target: 'http://localhost:1994',

        changeOrigin: true,

        rewrite: (path) => path.replace(/^\/api/, ''),

      },

    },

  },

});

 后端与启动类同层新建一个设置类
 

/*** 跨域配置*/
@Configuration
public class WebConfig implements WebMvcConfigurer {@Beanpublic CorsFilter corsFilter(){// 初始化cors配置对象CorsConfiguration configuration = new CorsConfiguration();configuration.setAllowCredentials(true); // 允许使用cookie,但是使用cookie是addAllowedOrigin必须是具体的地址,不能是*
//        configuration.addAllowedOrigin("*");configuration.addAllowedOrigin("http://localhost:5173");configuration.addAllowedMethod("*");  //允许的请求方式,get,put,post,deleteconfiguration.addAllowedHeader("*");//允许的头信息//初始化cors的源对象配置UrlBasedCorsConfigurationSource corsConfigurationSource = new UrlBasedCorsConfigurationSource();corsConfigurationSource.registerCorsConfiguration("/**",configuration);//3.返回新的CorsFilter.return new CorsFilter(corsConfigurationSource);}
}

这再次重启就万事大吉 同样的错误居然在短时间内出现了两次 难崩 果然不能偷懒不做笔记 

数据库配置

maven配置

后端url地址

前后端添加对应的cors跨越代码

model文件夹中的实体类头都加上@Data注解

如果网页的css失效就在cmd里输入对应的端口号 

语句:

搜索   netstat -ano | findstr 端口号     显示出的最右边为端口号 什么也没有说明此端口无占用

停止进程    taskkill /PID 进程号 /F

然后从后端到前端依次启动然后访问页面即可

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/1898.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

分布式光伏管理办法

随着分布式光伏项目的不断增加,传统的管理方式已经难以满足高效、精准的管理需求。光伏业务管理系统作为一种集信息化、智能化于一体的管理工具,正在逐步成为分布式光伏项目管理的重要支撑。 光伏业务管理系统通过数字化手段实现对光伏业务全流程的精细化…

录屏+直播神器 OBS Studio 30.2.3

这款很多游戏博主都在用的录制神器,平时你看到的抖音平台上的游戏主播,大部分都用的这款直播录屏软件。同时它可以虚拟直播(绿幕虚拟背景)具体可以百度或哔哩哔哩上有详细教程 软件优点 高性能实时视频/音频捕获和混合。创建由多个…

企业应该采用和支持网络安全的几个实践

令人惊讶的是,网络安全可以像遵循最佳实践一样简单,理想情况下应该将其融入企业文化本身。在这篇文章中了解更多。 网络安全的重要性 在当今的网络安全期望中,软件工程师应该优先考虑他们的计算机系统和内部IT网络的安全性。我认为严重依赖…

ConnectX-7 25/50/100/200/400G NIC

ConnectX-7 25/50/100/200/400G NIC ConnectX-7提供了广泛的软件定义、硬件加速的网络、存储和安全功能,使组织能够现代化和保护他们的IT基础设施。此外,ConnectX-7还支持从边缘到核心数据中心到云的敏捷和高性能解决方案,同时增强网络安全性…

(代码随想录)BEllman_ford算法 及其优化 SPFA

代码随想录 (知识提炼) Bellman_ford算法 用处 解决带负权值的单源最短路问题 核心思想 对所有边进行松弛n-1次操作(n为节点数量),从而求得目标最短路。 何为松弛 minDist[B] 表示 到达B节点 最小权值,minDist[B] 有哪些状态可…

代码随想录算法训练营第十六天|530.二叉搜索树的最小绝对差、501.二叉搜索树中的众数、236. 二叉树的最近公共祖先

530.二叉搜索树的最小绝对差 题目链接:. - 力扣(LeetCode) 文章讲解:代码随想录 视频讲解:二叉搜索树中,需要掌握如何双指针遍历!| LeetCode:530.二叉搜索树的最小绝对差_哔哩哔哩…

大数据分析案例-基于随机森林算法的智能手机价格预测模型

🤵‍♂️ 个人主页:艾派森的个人主页 ✍🏻作者简介:Python学习者 🐋 希望大家多多支持,我们一起进步!😄 如果文章对你有帮助的话, 欢迎评论 💬点赞&#x1f4…

mtr mysql-test-run.pl — Run MySQL Test Suite

The mysql-test-run.pl Perl script is the main application used to run the MySQL test suite. pl Perl脚本是用来运行MySQL测试套件的主要应用程序。 It invokes mysqltest to run individual test cases. 它调用mysqltest来运行单独的测试用例。 Invoke mysql-test-run.pl…

华为云计算知识总结——及案例分享

目录 一、华为云计算基础知识二、华为云计算相关案例实战案例一:搭建弹性云服务器(ECS)并部署Web应用案例二:构建基于OBS的图片存储和分发系统案例三:基于RDS的高可用数据库应用案例四:使用华为云DDoS防护保…

计算合约方法的签名

计算合约方法的签名 通过智能合约实现 // SPDX-License-Identifier: MIT pragma solidity ^0.8.26;contract FunctionSelector {/*"transfer(address,uint256)"0xa9059cbb"transferFrom(address,address,uint256)"0x23b872dd*/function getSelector(stri…

Ant-Dseign-Pro如何去国际化及删除oneapi.json后出现程序直接结束问题的解决方案

作者:CSDN-PleaSure乐事 欢迎大家阅读我的博客 希望大家喜欢 使用环境:WebStorm 移除国际化 什么是国际化 在AntDesignPro当中,国际化就是如果你初始默认使用中文,想要切换英文,我们可以切换到英文模式。同时&#x…

太速科技-9-基于DSP TMS320C6678+FPGA XC7V690T的6U VPX信号处理卡

基于DSP TMS320C6678FPGA XC7V690T的6U VPX信号处理卡 一、概述 本板卡基于标准6U VPX 架构,为通用高性能信号处理平台,系我公司自主研发。板卡采用一片TI DSP TMS320C6678和一片Xilinx公司Virtex 7系列的FPGA XC7V690T-2FFG1761I作为主处理器&#…

Mysql当中的各种log

一、MySQL日志文件类型 重做日志(redo log)回滚日志(undo log)二进制日志(binlog)错误日志(errorlog)慢查询日志(slow query log)一般查询日志(g…

自定义规则配置教程

大家在使用waf的时候,因为业务特殊性和waf的严格校验,有时会产生误报,阻拦合法流量。 这个时候,只能通过自定义规则进行补充,选择加白名单或者黑名单。 很多人会说配置黑白名单失效了,其实95%以上都是自己…

Java项目:图书管理系统(有源代码)

Java项目:图书管理系统(有源代码) 直接上项目实现效果,文末有源码获取方式 一、技术选型 • Spring Boot、Vue、MySQL、Redis 二、功能说明 用户功能 图书查询功能 读者规则功能 查看公告 个人信息 借阅信息 违章信息 读者留言…

鸿蒙生态崛起:开发者机遇、挑战与未来展望

背景 鸿蒙系统不断发展,有与安卓、iOS 形成三足鼎立之势,且其在智能手机、智能穿戴、车载、家居等行业领域的应用越来越广泛。作为开发者,如何抓住鸿蒙生态崛起的机遇,解决开发挑战,创造更好的应用体验?欢…

MYSQL复合查询

当我们要查询的数据要使用的限制条件不是很简单的时候,可能要在一个限制条件下再次限制,比如要查找小美所在公司的平均薪资,就要先找到小美的公司,再求平均薪资。复合查询分三种,多表连接查询、子句查询和合并查询。 …

【论文阅读笔记】VLP: A Survey on Vision-language Pre-training

目录 前言2 特征提取(Feature extraction)2.1.1 图象特征提取OD-based Region feature / RoIFreeze the pre-trained object detectorsGrid features(网格特征)CNN-GFsEnd-to-End Training(端到端训练)ViT-…

U盘插入电脑不显示?别急,这里有解决方案!

随着科技的飞速发展,U盘已成为我们日常生活和工作中不可或缺的数据存储工具。然而,你是否遇到过这样的情况:满心欢喜地将U盘插入电脑,却发现电脑竟然“视而不见”,U盘图标迟迟不出现?别急,这种情…

如何使用Web-Check和cpolar实现安全的远程网站监测与管理

文章目录 前言1.关于Web-Check2.功能特点3.安装Docker4.创建并启动Web-Check容器5.本地访问测试6.公网远程访问本地Web-Check7.内网穿透工具安装8.创建远程连接公网地址9.使用固定公网地址远程访问 前言 本期给大家分享一个网站检测工具Web-Check,能帮你全面了解网…