VUE跨域详解以及常用解决跨域的方法

在前端开发过程中，我们经常遇到需要与不同的域名或端口的服务器进行数据交互的情况，这就会产生跨域问题。本文将详细讲解Vue中跨域的问题以及常用的解决方法。

什么是跨域

跨域是指，当一个网页的文档、脚本或资源请求另一个域名或端口的资源时，浏览器会对这个请求进行限制，以防止从一个域上的网页去攻击另一个域的网页。例如，一个使用http协议的网站 www.example.com 需要读取另一个使用https协议的网站 api.example.com 的数据，这时候就会产生跨域问题。

解决跨域问题的方法

CORS

CORS（Cross-Origin Resource Sharing）是W3C标准，部分先进浏览器已经实现，可以通过设置HTTP响应头来告知浏览器，让浏览器执行跨源请求。这种解决方式是最常用的跨域解决方案。

前端处理方式

在Vue中，我们可以通过设置axios的withCredentials参数和请求头中的xhrFields来完成CORS请求。

import axios from 'axios'

axios({
  url: 'http://example.com/api',
  method: 'post',
  withCredentials: true,
  headers: {
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Headers': 'Content-Type',
    'Access-Control-Allow-Methods': 'POST'
  }
})

服务器端处理方式

在响应头中添加Access-Control-Allow-Origin系列的键值对，例如：

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE
Access-Control-Allow-Headers: Content-Type
Access-Control-Allow-Credentials: true

代理

在开发环境下，我们可以通过配置代理来解决跨域问题。Vue-cli3中通过配置vue.config.js来实现代理。

在vue.config.js中可以设置代理：

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

其中，target是代理的目标地址，changeOrigin为是否改变实际请求的域名，pathRewrite为路径重写，我们通常会去掉url中的/api前缀。

JSONP

JSONP是一种跨域的解决方式，它利用了浏览器对script标签的开放政策。这种跨域方式的原理是利用script标签可以跨域请求资源，并且可以在请求的url中传递一个回调函数名，实现把服务端返回的JSON数据封装到回调函数中，这样浏览器就可以直接执行回调函数了。

function jsonp(url, callback) {
  const script = document.createElement('script')
  script.src = url + '?callback=' + callback
  document.body.appendChild(script)
}

jsonp('http://example.com/api', 'callback')

示例说明

示例一：使用CORS解决跨域

假设我们需要从http://example.com/api获取一些数据：

import axios from 'axios'

axios({
  url: 'http://example.com/api',
  method: 'get',
  withCredentials: true,
  headers: {
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Headers': 'Content-Type',
    'Access-Control-Allow-Methods': 'GET, POST'
  }
}).then(response => {
  console.log(response.data)
}).catch(error => {
  console.log(error)
})

需要注意的是，服务器端需要响应的头信息如下：

Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: Content-Type
Access-Control-Allow-Methods: GET, POST

示例二：使用代理解决跨域

假设我们需要从http://example.com/api获取一些数据，在开发环境下，我们可以设置代理，从而完成跨域请求：

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

这样我们在Vue组件中就可以使用相对地址来访问服务器接口：

axios({
  url: '/api/api',
  method: 'get'
}).then(response => {
  console.log(response.data)
}).catch(error => {
  console.log(error)
})

结论

以上就是Vue跨域问题的解决方法，我们可以根据需要选择合适的解决方法。CORS是最常用的跨域解决方式，在生产环境中也是最好的解决方式。在开发环境中，我们可以通过配置代理或者使用JSONP来完成跨域。