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

后来的前情提要 ：

后端的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 {
    @Bean
    public 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,delete
        configuration.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

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