Vue CLI 跨域置方法详解跨域设置方法详解这是由于浏览器的同源策略所导致的

Vue CLI 跨域设置方法详解

一、使用代理

使用Vue CLI自带的开发服务器代理功能，就像一个中间人，帮你把请求转发到目标服务器，绕过浏览器的同源策略限制。

1. 安装依赖

首先，确保你的项目已经安装了Vue CLI。

2. 配置

在项目根目录下创建或编辑 vue.config.js 文件，添加代理配置：

module.exports = {


  devServer: {


    proxy: {


      '/api': {


        target: 'http://target-server.com',


        changeOrigin: true,


        pathRewrite: {'^/api' : ''}


      }


    }


  }


}

3. 请求示例

在Vue组件中使用Axios或其他HTTP库进行请求时，确保请求路径前添加代理标识：

axios.get('/api/data')


  .then(response => console.log(response.data))


  .catch(error => console.error(error))

二、使用CORS

CORS（跨源资源共享）是一种机制，允许服务器指定哪些网站可以访问它的资源。

1. 服务器端配置

在服务器端添加CORS头信息，允许特定源站或所有源站访问：

res.setHeader('Access-Control-Allow-Origin', 'http://your-origin.com');

2. 前端请求

确保前端请求时不需要特殊处理，只需要正常发送请求：

axios.get('http://your-origin.com/data')


  .then(response => console.log(response.data))


  .catch(error => console.error(error))

三、配置服务器

如果你有权限配置服务器，可以通过修改服务器的设置来允许跨域访问。

1. Nginx配置

修改Nginx配置文件，添加CORS头信息：

location / {


  add_header 'Access-Control-Allow-Origin' '';


  add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';


  add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';


}

2. Apache配置

修改Apache配置文件，添加CORS头信息：

<IfModule mod_headers.c>


  Header set Access-Control-Allow-Origin ""


  Header set Access-Control-Allow-Methods "GET, POST, OPTIONS"


  Header set Access-Control-Allow-Headers "DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization"


</IfModule>

解决Vue CLI跨域问题的方法包括使用代理、CORS和配置服务器。每种方法都有其适用的场景和优缺点：

建议根据具体项目需求选择合适的方法。如果在开发环境中频繁遇到跨域问题，使用代理是最快捷的方法；如果需要在生产环境中严格控制跨域访问，使用CORS或配置服务器则是更好的选择。

相关问答FAQs

1. 什么是跨域？为什么需要设置跨域？

跨域是指在浏览器中，当一个域名的网页通过Ajax请求另一个域名下的资源时，浏览器会出于安全原因拒绝这种跨域请求。这是由于浏览器的同源策略所导致的。同源策略是指浏览器要求两个网页具有相同的协议、域名和端口号才允许进行跨域请求。

但在开发过程中，我们经常会遇到前端和后端不在同一域名下的情况，这时就需要设置跨域以允许前端发送跨域请求来获取后端的数据或资源。

2. 如何在 Vue CLI 中设置跨域？

在 Vue CLI 中，可以通过配置 vue.config.js 文件来设置跨域。首先，在项目的根目录下创建一个名为 vue.config.js 的文件（如果已存在则直接打开），然后在文件中添加以下代码：

module.exports = {


  devServer: {


    proxy: {


      '/api': {


        target: 'http://target-server.com',


        changeOrigin: true,


        pathRewrite: {'^/api' : ''}


      }


    }


  }


}

3. 如何在 Vue CLI 中处理跨域时的 Cookie 问题？

在跨域请求中，默认情况下，浏览器不会发送跨域请求的 Cookie，这可能会导致一些问题，例如无法进行用户认证或保持用户登录状态。为了解决这个问题，可以在配置 vue.config.js 文件时添加一些额外的配置。

module.exports = {


  devServer: {


    proxy: {


      '/api': {


        target: 'http://target-server.com',


        changeOrigin: true,


        pathRewrite: {'^/api' : ''},


        onProxyReq: function(proxyReq, req, res) {


          proxyReq.setHeader('Cookie', req.headers.cookie);


        }


      }


    }


  }


}

上述代码中，的配置使得跨域请求的 Cookie 在浏览器中可用，将 替换为你的域名（例如 ）以保持 Cookie 的正确性。