Access to XMLHttpRequest at 'http://127.0.0.1:9999/login?username=1634856201@qq.com&password=wcl123456' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Login_Form.vue:97 POST http://127.0.0.1:9999/login?username=1634856201@qq.com&password=wcl123456 net::ERR_FAILED 403 (Forbidden)
这是一个典型的CORS（跨源资源共享）问题，也就是说浏览器阻止了从 http://localhost:8080 发起到 http://127.0.0.1:9999/login 的请求。
首先我的后端部署IP端口为：localhost：9999
前端部署IP端口为：localhost：8080
并且我在后端是有对跨域进行配置的：
/** * 创建并配置CORS过滤器，以允许来自指定来源的跨域请求。 * 这个方法设置了过滤器的配置，包括允许的来源、请求头、请求方法和凭证。 * * @return CorsFilter 返回配置好的CORS过滤器实例。 */ public CorsFilter corsFilter() { CorsConfiguration config = new CorsConfiguration(); // 设置允许的来源为http://localhost:9999 config.addAllowedOrigin("http://localhost:9999"); // 设置允许所有的请求头 config.addAllowedHeader("*"); // 设置允许所有的请求方法 config.addAllowedMethod("*"); // 允许请求携带凭证（如cookies） config.setAllowCredentials(true); UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); // 将CORS配置应用到所有路径 source.registerCorsConfiguration("/**", config); return new CorsFilter(source); }
最后发现我的问题是出现在该行代码如下：
// 设置允许的来源为http://localhost:9999 config.addAllowedOrigin("http://localhost:9999");
这行代码的真实意思是配置允许接收处理哪一个IP端口发送过来的请求，而我的前端部署IP端口为localhost：8080，所以正确的配置应该是：
// 设置允许的来源为http://localhost:8080 config.addAllowedOrigin("http://localhost:8080");
这样的话就可以解决前端在localhost：8080端口发送请求给后端，后端在localhost：9999端口接收该跨域请求了。
