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

embedded/2024/11/12 22:10:39/

后来的前情提要 :

后端的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.ppmy.cn/embedded/136135.html

相关文章

HTB:GreenHorn[WriteUP]

目录 连接至HTB服务器并启动靶机 使用nmap对靶机TCP端口进行开放扫描 再次使用nmap对这三个端口进行脚本、服务扫描 尝试先通过curl访问靶机80端口 将靶机IP与该域名写入hosts使DNS本地解析 使用浏览器访问greenhorn.htb 使用Wappalyzer插件查看该页面技术栈 尝试在sea…

【数据结构】快慢指针探秘:理解链表与数组中的环结构

在处理链表或数组时,我们经常需要在一次遍历中找到特定的位置或检测某种模式。这时,快慢指针技术就能成为强大的工具,尤其在链表面试题中。本文将详细介绍什么是快慢指针、它们的工作原理,并通过一些实际应用帮助你理解这种技巧。…

详细分析Js中保留前几位小数的基本知识(附Demo)

目录 前言1. 基本知识2. Demo3. 取整 拓展 前言 从实战中学习,由于需要计算充电以及结束充电的时长,并且保留两位小数: onLoad(page, params {}) {// 查询要带页面信息,当前页还有数据listViewDeviceChargeHistory(page.curren…

华为ENSP--ISIS路由协议

项目背景 为了确保资源共享、办公自动化和节省人力成本,公司E申请两条专线将深圳总部和广州、北京两家分公司网络连接起来。公司原来运行OSFP路由协议,现打算迁移到IS-IS路由协议,张同学正在该公司实习,为了提高实际工作的准确性和…

MATLAB 在数组的元素后面使用百分号 `%` 添加注释时会将其误认为是行分隔符,导致数组维度不一致

该警告提示 MATLAB 在数组的元素后面使用百分号 % 添加注释时会将其误认为是行分隔符,导致数组维度不一致。为了解决这个问题,您可以采用以下两种方法之一: 使用分号 ; 替换逗号 ,:这会将每个注释作为新行的开始,更加…

什么是crm客户关系管理系统?全面认识指南

在当今竞争激烈的商业环境中,企业需要有效的工具来管理与客户的关系,以提高客户满意度和忠诚度。客户关系管理系统(CRM)正是这样一种工具,它帮助企业更好地理解和服务客户,从而提升业务绩效。本文将全面介绍…

C++入门基础知识142—【关于C++ 友元函数】

成长路上不孤单😊😊😊😊😊😊 【14后😊///C爱好者😊///持续分享所学😊///如有需要欢迎收藏转发///😊】 今日分享关于C 友元函数的相关内容! 关于…

Maven 中央仓库地址 mvnrepository.com

下载一些 jar 包驱动,不需用去官网下了,直接去 Maven 中央仓库,高效、简单 Maven 中央仓库地址 https://mvnrepository.com/open-source 我们下期见,拜拜!