后来的前情提要 :
后端的ip地址在本地测试阶段应该设置为localhost
前端中写cors的配置 后端也要写cors的配置 且两者的url都要为localhost
前端写的baseUrl是指定对应的后端的ip地址以及端口号 很重要 在本地时后端的IP的地址也必须为本地的
F12的网页报错是;
连接超时
xhr.js:167Uncaught (in promise)
- AxiosError {message: 'timeout of 10000ms exceeded', name: 'AxiosError', code: 'ECONNABORTED', config: {…}, request: XMLHttpRequest, …}
- code: "ECONNABORTED"
- config: {transitional: {…}, adapter: Array(2), transformRequest: Array(1), transformResponse: Array(1), timeout: 10000, …}
- message: "timeout of 10000ms exceeded"
- name: "AxiosError"
- request: XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 10000, withCredentials: false, upload: XMLHttpRequestUpload, …}
- stack: "AxiosError: timeout of 10000ms exceeded\n at XMLHttpRequest.handleTimeout (http://localhost:5173/node_modules/.vite/deps/axios.js?v=d1865a9f:1447:14)"
- [[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
然后从后端到前端依次启动然后访问页面即可