解决“Access to XMLHttpRequest at ‘XXX’ from origin ‘http://localhost’ has been blocked by CORS policy”

解决“Access to XMLHttpRequest at ‘http://127.0.0.1:3000/’ from origin ‘http://localhost:8080’ has been blocked by CORS policy”

在日常的Web开发中，跨源资源共享（CORS）错误是一个常见的问题，尤其是当你尝试从一个源（origin）向另一个源发送HTTP请求时。本文将深入探讨一个特定的CORS错误信息，并提供详细的解决思路和方法，特别是针对客户端（前端）Vue项目的跨域解决方案。

一、常见报错问题

当你尝试从一个Web应用（例如，运行在http://localhost:8080的Vue项目）向另一个不同源的服务器（例如，http://127.0.0.1:3000）发送XMLHttpRequest（XHR）请求时，你可能会遇到以下错误：

Access to XMLHttpRequest at 'http://127.0.0.1:3000/' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

这个错误表明，目标资源没有返回CORS策略所需的Access-Control-Allow-Origin响应头，因此浏览器阻止了跨源请求。

二、解决思路

要解决CORS错误，你可以从以下几个方面入手：

1. 修改服务器设置：确保服务器配置了正确的CORS策略，允许来自你Web应用的源。
2. 使用代理：在客户端和服务器之间设置一个代理，将所有请求转发到目标服务器，并添加必要的CORS头。
3. JSONP：如果只需要GET请求，可以使用JSONP方法绕过CORS限制。
4. 配置Web服务器：在Web服务器上配置CORS中间件或模块。
5. 开发环境配置：在开发环境中，使用如webpack的devServer代理设置等工具来绕过CORS。

三、解决方法

接下来，详细解释每一种解决方法，特别是针对Vue项目的客户端解决方案：

1. 修改服务器设置：

   • 在你的服务器上添加Access-Control-Allow-Origin响应头。例如，在Node.js的Express框架中，你可以使用cors中间件：

     const express = require('express');
     const cors = require('cors');
     const app = express();
     
     app.use(cors({
       origin: 'http://localhost:8080'
     }));
     
     app.listen(3000, () => {
       console.log('Server is running on port 3000');
     });
     

2. 使用代理（特别是针对Vue项目）：

   • 在你的Vue项目中，你可以配置webpack的devServer代理来解决跨域问题。在vue.config.js文件中添加如下配置：

     module.exports = {
       devServer: {
         proxy: {
           '/api': {
             target: 'http://127.0.0.1:3000',
             changeOrigin: true,
             ws: true,
             pathRewrite: {
               '^/api': ''
             }
           }
         }
       }
     };
     

   • 这样配置后，所有以/api开头的请求都会被代理到http://127.0.0.1:3000，并且会添加适当的CORS头。

3. JSONP：

   • 使用JSONP方法，在HTML中添加一个<script>标签，其src属性指向目标URL。服务器需要返回一个JavaScript函数调用，其中包含JSON数据。

4. 配置Web服务器：

   • 在Web服务器上安装和配置CORS模块。例如，在Apache服务器上，你可以使用mod_headers模块来添加CORS头：

     Header set Access-Control-Allow-Origin "http://localhost:8080"
     

5. 开发环境配置：

   • 使用开发工具提供的CORS绕过功能。例如，在Chrome浏览器中，你可以使用CORS Unblock扩展来临时解决CORS问题。

四、常见场景分析

1. 开发环境与生产环境不一致：

   • 在开发环境中，你可能使用了不同的端口或域名，导致CORS问题。确保你的开发环境配置与生产环境一致，或适当配置CORS策略。

2. 第三方API集成：

   • 当你尝试集成第三方API时，可能会遇到CORS问题。确保你了解并遵守第三方API的CORS策略。

3. 前后端分离：

   • 在前后端分离的应用中，前端和后端可能部署在不同的源上。确保后端配置了正确的CORS策略，允许前端源的访问。

4. 使用CDN：

   • 当你的资源部署在CDN上时，你需要确保CDN配置了正确的CORS策略。

5. 浏览器插件或扩展：

   • 某些浏览器插件或扩展可能会修改HTTP请求或响应头，导致CORS问题。尝试禁用这些插件或扩展，看看问题是否解决。

五、扩展与高级技巧

1. 使用Access-Control-Allow-Credentials：

   • 当你需要发送包含凭据（如Cookies或HTTP认证信息）的请求时，你需要在服务器上设置Access-Control-Allow-Credentials为true。

2. 预检请求（Preflight Request）：

   • 了解并处理预检请求。当请求满足某些条件（如使用自定义头部、请求方法不是GET/HEAD/POST等）时，浏览器会自动发送一个OPTIONS请求作为预检。

3. 动态CORS策略：

   • 根据请求的不同，动态设置CORS策略。例如，基于请求的某些参数或头部来决定是否允许跨源请求。

4. 使用HTTPS：

   • 考虑使用HTTPS来增强安全性。当使用HTTPS时，浏览器对CORS策略的处理可能更加严格。

5. 调试和日志记录：

   • 在服务器上添加详细的日志记录，以帮助调试CORS问题。确保记录所有相关的请求和响应头。

六、总结与展望

CORS错误是Web开发中常见的问题，但通过适当的配置和策略，你可以有效地解决这些问题。了解CORS的工作原理和浏览器的安全策略是关键。对于Vue项目，使用webpack的devServer代理是一个简单而有效的解决方案。随着Web技术的不断发展，我们期待看到更简洁、更安全的跨源资源共享机制。作为开发者，我们需要不断学习和适应这些变化，以确保我们的应用能够在各种环境中顺利运行。

看到这里的小伙伴，欢迎点赞、评论，收藏！

如有前端相关疑问，博主会在第一时间解答，也同样欢迎添加博主好友，共同进步！！！