vue axios 解决跨域问题CORS

Vue.js 和 Axios 是一对常用的前端框架和HTTP库组合，用于构建单页面应用。当在Vue项目中使用Axios发起请求到跨域服务器时，可能会遇到浏览器的安全限制——同源策略(CORS)。

CORS是Cross-Origin Resource Sharing（跨源资源共享）的缩写，它规定了浏览器如何处理来自不同源的XMLHttpRequest请求。默认情况下，浏览器不允许从非同源的服务器获取数据，因为这涉及到安全风险。

在Vue+Axios环境中解决跨域问题，通常有以下几种常见方法：

1. **服务端设置**:
- 对于支持CORS的后端语言（如Node.js的Express），可以在响应头添加`Access-Control-Allow-Origin`字段，指定允许哪些源访问资源。
- 如果是API Gateway或者代理层，可以配置允许特定域名或所有域名的请求通过。

2. **JSONP** (JSON with Padding):
针对GET请求，可以利用JSONP技术，将Ajax请求转换为script标签，服务器返回的数据包裹在函数调用中，绕过CORS限制。

3. **axios-cors插件**:
可以安装axios-cors插件（`npm install axios-cors`），在配置Axios实例时启用该插件，它会自动添加CORS请求头部信息。

4. **vue.config.js设置**:
在Vue CLI 3及以上版本中，可以在项目的`vue.config.js`文件中，通过`devServer.options`属性配置跨域，如允许所有来源：

   module.exports = {
     devServer: {
       proxy: {
         '/api': {
           target: 'https://api.example.com',
           ws: true,
           changeOrigin: true,
           pathRewrite: { '^/api': '' },
         },
       },
     },
   };

注意，在生产环境部署时，最好还是在后端处理CORS，而不是仅依赖前端配置。