处理跨域异常： Access to XMLHttpRequest：No ‘Access-Control-Allow-Origin‘ header is present on the requested

当你遇到 login:1 Access to XMLHttpRequest at 'http://127.0.0.1:58081/api/v1/user/login' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. 这样的错误时，这通常是因为浏览器的同源策略（Same-Origin Policy）阻止了跨源（Cross-Origin）HTTP 请求。

解释

• 同源策略：浏览器出于安全考虑，限制了一个源（协议+域名+端口）的文档或脚本中发起的请求不能访问与源不同的服务器资源。
• CORS（跨源资源共享）：是一种机制，它使用额外的 HTTP 头部来告诉浏览器允许一个源（域）的网页中运行的脚本访问来自不同源服务器上的指定资源。

解决方案

选择哪种解决方案取决于你的具体需求和环境。在生产环境中，通常建议配置后端以允许来自你前端应用的确切源的 CORS 请求。

1. 后端设置 CORS 头部：
   在你的后端服务（在这个例子中是运行在 http://127.0.0.1:58081 的服务）中设置 CORS 头部。这通常涉及在响应中添加 Access-Control-Allow-Origin 头部。例如，如果你允许所有源（这在实际生产环境中可能不安全），你可以设置：

   // 假设你使用的是 Java 和 Spring Boot  
   @Configuration  
   public class CorsConfig {  
   
       @Bean  
       public WebMvcConfigurer corsConfigurer() {  
           return new WebMvcConfigurer() {  
               @Override  
               public void addCorsMappings(CorsRegistry registry) {  
                   registry.addMapping("/**")  
                       .allowedOrigins("http://localhost:3000") // 指定允许的源  
                       .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")  
                       .allowedHeaders("*")  
                       .allowCredentials(true);  
               }  
           };  
       }  
   }

2. 如果你使用的是其他后端技术栈（如 Node.js、Django 等），你需要找到相应的方法来设置 CORS 头部。

3. 使用代理：
   如果你正在开发一个前端应用（如 React、Vue、Angular 应用），并且正在使用如 Webpack Dev Server 这样的开发服务器，你可以配置它作为代理服务器，将所有对后端 API 的请求转发到后端服务器。这样，从浏览器的角度来看，所有的请求都是同源的，因此不会触发 CORS 策略。

   在 Webpack Dev Server 中，你可以在 webpack.config.js 文件中配置 devServer.proxy：

   module.exports = {  
     // ...  
     devServer: {  
       proxy: {  
         '/api': {  
           target: 'http://127.0.0.1:58081',  
           changeOrigin: true,  
         },  
       },  
     },  
     // ...  
   };

4. 这样，当你从你的前端应用向 /api/v1/user/login 发送请求时，Webpack Dev Server 会将这些请求代理到 http://127.0.0.1:58081/api/v1/user/login。

5. 浏览器插件或设置：
   虽然这不是一个推荐的生产环境解决方案，但你可以使用浏览器插件（如 CORS Unblock）来临时禁用 CORS 策略，以便在开发过程中进行测试。然而，请注意，这可能会使你的浏览器容易受到跨站请求伪造（CSRF）等安全攻击。

6. 检查端口和协议：
   确保你请求的 URL（http://127.0.0.1:58081/api/v1/user/login）与你的后端服务实际监听的端口和协议相匹配。

7. 使用 HTTPS：
   如果你打算在生产环境中部署你的应用，并且你的前端和后端都支持 HTTPS，确保在 CORS 配置中使用正确的协议（https:// 而不是 http://）。