vue20跨域代理怎么解决

随着 Web 开发的不断发展和进步，越来越多的前端技术和框架被广泛应用。Vue.js 作为一个现代化的 JavaScript 框架，已经成为了前端开发的热门选择。在 Vue.js 应用的开发过程中，跨域是一个经常会遇到的问题。本文将介绍 Vue.js 2.0 中的跨域问题及其解决方法。

一、什么是跨域

在 Web 应用开发中，当一个页面从一个域名的网站请求访问另一个域名的资源时，由于浏览器的同源策略限制，资源无法被正确的获取。这就是所谓的跨域。

具体来说，同源策略是浏览器最核心、最基础的安全功能。同源策略要求，两个网址只有在协议、域名和端口都相同的情况下，才允许相互访问，否则就产生跨域问题。

通俗的说，假设一个网站叫做 A 网站，另一个网站叫做 B 网站，当 A 网站通过浏览器请求 B 网站的数据时，由于 B 网站不在 A 网站所在的域中，所以默认情况下浏览器会拒绝这种访问请求。

二、Vue.js 2.0 中的跨域问题

由于 Vue.js 2.0 是一个单页应用程序，其默认的开发和生产环境都是使用本地的 Node.js 服务器进行开发和测试。在这种情况下，我们往往会遇到跨域问题。

例如，我们使用 axios 来发送 Ajax 请求，向后端服务器请求 JSON 数据，代码如下：

import axios from 'axios'

axios.get('http://localhost:8080/api/data')
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

在上面的代码中，我们尝试向地址为 http://localhost:8080/api/data 的服务器发送 GET 请求，但是由于默认情况下浏览器是不允许这种跨域访问的，所以在运行的时候就会出现错误。

三、如何解决跨域问题

为了解决跨域问题，我们需要指定一个代理服务器，在本地启动该服务器，然后把所有的跨域请求都转发到该服务器上。因为代理服务器和后端服务器都在同一个域中，所以就不存在跨域问题了。

在 Vue.js 2.0 中，我们可以使用 webpack-dev-server 中的 proxyTable 配置项来指定代理服务器。proxyTable 是一个对象，其中的每个属性都是代理规则，形如：

proxyTable: {
  '/api': 'http://localhost:9000'
}

上面的代码中，我们将以 /api 开头的所有请求都转发到地址为 http://localhost:9000 的服务器上。

四、示例代码

下面是一个关于如何使用 proxyTable 配置代理服务器的示例代码：

// 代码文件：vue.config.js

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:9000', // 代理目标地址
        pathRewrite: { '/api': '' }, // 请求路径重写
        changeOrigin: true, // 允许跨域
      },
    },
  },
}

在以上代码中，我们首先需要在 Vue.js 2.0 项目根目录下添加一个 vue.config.js 文件，该文件用来配置开发环境下的服务器。在 devServer 中，我们添加了一个 proxy 属性，该属性是一个对象，里面包含了我们的代理规则。我们可以根据后台 API 的实际情况来设置代理目标地址，例如 http://localhost:9000。

我们还可以设置 pathRewrite 属性，指定请求路径的重写规则。例如，当我们的请求路径为 /api/data 时，我们可以使用 { '/api': '' } 把 /api 前缀去掉，请求路径变成了 /data。

在最后，我们还需要设置 changeOrigin 属性为 true，来允许跨域访问。然后我们就可以愉快地使用 axios 发送跨域请求了：

import axios from 'axios'

axios.get('/api/data')
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

五、总结

本文介绍了 Vue.js 2.0 中的跨域问题及其解决方法。由于同源策略的限制，我们无法直接从前端应用程序中访问其他域名下的资源，但是我们可以使用代理服务器来绕过这个问题。在 Vue.js 2.0 中，我们可以使用 webpack-dev-server 的 proxyTable 配置项来指定代理服务器，解决跨域问题。

【文章原创作者：cc防御 http://www.558idc.com/gfip.html提供，感恩】