vue2.0跨域代理怎么解决

在前后端分离的开发模式中，前端通常是通过ajax请求后台接口获取数据。然而，由于同源策略的限制，前端只能请求同一域名下的接口，不能直接请求其他域名下的接口。这就是所谓的跨域问题。

为了解决跨域问题，我们可以使用跨域代理技术。在Vue2.0中，可以通过配置webpack的proxyTable来实现跨域代理。下面我们就来具体介绍一下如何在Vue2.0中配置跨域代理。

1. 安装http-proxy-middleware

http-proxy-middleware是一个Node.js的代理中间件，可以将请求代理转发到目标服务器，从而实现跨域请求。我们需要先安装http-proxy-middleware：

npm install http-proxy-middleware --save-dev

1. 配置proxyTable

在Vue2.0的项目中，webpack的配置文件通常是位于项目根目录下的config/index.js文件中。我们需要在该文件中配置proxyTable：

dev: {  // ...  proxyTable: {    '/api': {      target: 'http://127.0.0.1:3000', // 目标服务器地址      changeOrigin: true,  // 是否改变请求源      pathRewrite: {        '^/api': ''  // 路径重写      }    }  }},

上面的代码中，我们配置了一个代理规则，将以/api开头的请求代理到指定的目标服务器上。如果请求的url是/api/user，则会被代理到http://127.0.0.1:3000/user这个接口上。changeOrigin用于设置请求头中的host字段，pathRewrite用于路径重写，将/api前缀去掉。

立即学习“前端免费学习笔记（深入）”；

1. 配置package.json

在package.json文件中，我们需要添加以下代码：

"scripts": {  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",  "start": "npm run dev"},

这会让我们可以使用npm run dev命令启动开发服务器，并且代理规则会被自动加载和使用。

1. 在Vue文件中使用代理

在需要用到跨域请求的Vue单文件组件中，我们可以直接使用代理规则中定义的/api前缀来请求数据，如下所示：

// 请求当前登录用户信息axios.get('/api/user').then(response => {  this.user = response.data}).catch(error => {  console.log(error)})