本地localhost测试CORS跨域问题的解决方法

在本地开发环境中使用Vue 2和Axios时，确实可能会遇到跨域问题，尤其是在尝试从localhost访问其他端口的服务时。跨域问题是由浏览器的同源策略引起的，该策略限制了一个源（协议、域名、端口号）的脚本只能读取另一个源的资源。

常规配置

1. 使用代理：

   • 这是解决本地开发环境跨域问题的常见方法。Vue CLI提供了一个便捷的方式来配置开发服务器的代理。你可以在vue.config.js文件中设置代理规则，将所有以特定前缀（如/api）开头的请求代理到目标服务器。
   • 例如：

     module.exports = {
       devServer: {
         proxy: {
           '/api': {
             target: 'http://localhost:3000', // 目标服务器的地址
             changeOrigin: true,
             pathRewrite: { '^/api': '' }
           }
         }
       }
     };
     

     这样，当你从Vue应用发送一个以/api开头的请求时，开发服务器会将其代理到http://localhost:3000。

2. 后端配置CORS：

   • 如果你可以控制后端服务器，另一种解决跨域问题的方法是配置CORS（跨域资源共享）。这涉及到在后端服务器的响应头中添加适当的CORS头信息，以允许跨域请求。
   • 例如，在Node.js Express服务器中，你可以添加以下中间件来允许所有源的跨域请求：

     const express = require('express');
     const app = express();
     
     app.use((req, res, next) => {
       res.header('Access-Control-Allow-Origin', '*');
       res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
       res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
       next();
     });
     
     app.listen(3000, () => {
       console.log('Server running on port 3000');
     });
     

     请注意，在生产环境中，出于安全考虑，你应该避免使用通配符*来允许所有源的跨域请求，而是应该明确指定允许访问的源。

3. 使用JSONP：

   • JSONP是一种古老的跨域解决方案，它利用<script>标签的src属性可以跨域加载资源的特性。然而，JSONP只支持GET请求，并且存在安全风险（如XSS攻击），因此不推荐在现代Web应用中使用。

4. 使用WebSocket：

   • WebSocket是一种全双工通信协议，可以在浏览器和服务器之间建立持久连接。虽然WebSocket可以用于解决跨域问题，但它主要用于实时通信场景，而不是传统的HTTP请求/响应模式。

5. 配置Nginx等反向代理：

   • 在生产环境中，你可以使用Nginx等反向代理服务器来解决跨域问题。通过配置Nginx，你可以将来自客户端的跨域请求转发到后端服务器，并在Nginx中处理CORS头信息。

错误排查

has been blocked by CORS policy: The value of the
‘Access-Control-Allow-Origin’ header in the response must not be the
wildcard ‘*’ when the request’s credentials mode is ‘include’. The
credentials mode of requests initiated by the XMLHttpRequest is
controlled by the

当你看到这个CORS策略错误消息时，它意味着你的前端应用（可能是使用XMLHttpRequest或类似技术如Axios）正在尝试发送一个包含凭据（如Cookies或HTTP认证信息）的请求，而后端服务器的响应中设置了Access-Control-Allow-Origin为*。根据CORS政策，当请求包含凭据时，Access-Control-Allow-Origin不能设置为通配符*，而必须明确指定允许的源（即你的前端应用的域名）。

要解决这个问题，你需要按照以下步骤操作：

1. 确定前端应用的源：

   • 找出你的前端应用是从哪个域名或IP地址发送请求的。这通常是你的开发服务器的地址，如http://localhost:8080。

2. 修改后端服务器的CORS配置：

   • 在后端服务器的CORS配置中，将Access-Control-Allow-Origin的值从*改为你的前端应用的源。
   • 例如，如果你的前端应用运行在http://localhost:8080，那么后端服务器的CORS配置应该像这样：

     res.header('Access-Control-Allow-Origin', 'http://localhost:8080');
     

   • 确保后端服务器还设置了其他必要的CORS头，如Access-Control-Allow-Credentials为true，以及可能的Access-Control-Allow-Methods和Access-Control-Allow-Headers。

3. 配置前端请求：

   • 确保前端请求在发送凭据时（如使用withCredentials: true）是正确配置的。如果你使用的是Axios，这通常不是必需的，因为Axios默认不会发送凭据，除非你明确设置。

4. 测试：

   • 在修改后端和前端配置后，重新加载前端应用并尝试发送请求，看看是否还会出现CORS错误。

5. 生产环境注意事项：

   • 在生产环境中，确保你的CORS配置是安全的。不要将Access-Control-Allow-Origin设置为*，除非你确定你的应用不需要保护敏感数据。
   • 考虑使用更严格的CORS策略，如只允许特定的源或路径。

通过遵循这些步骤，你应该能够解决由于CORS政策和凭据模式导致的跨域问题。如果你仍然遇到问题，可能需要检查你的网络请求和响应的详细信息，以确保所有相关的CORS头都已正确设置。