Vue设置proxy

为什么会出现跨域问题？

Vue项目中，执行npm run serve指令，启动一个本地服务器 http://localhost:8080 。如果我们的应用要去请求一个后台接口：http://120.79.70.32:8889/api/private/v1/login 。

因为应用所在的域（ http://localhost:8080 ）和后台数据接口的域（ http://120.79.70.32:8889 ）是不一样的，所以就会出现跨域问题。

如何解决？通过devServer.proxy启动代理服务

1 . 创建 vue.config.js 文件。
2 . 设置 devServer.proxy字段。

示例：

//main.js

import axios from 'axios'
 
axios.post('/login', {
    username: 'xxx',
    password: 'xxx'
})
.then(res => {
    console.log(res)
})
.catch(err => {
    console.log(err)
})

//vue.config.js

module.exports = {
    devServer: {
        proxy: {
            '/login': {  // /login 表示拦截以/login开头的请求路径
                target: 'http://120.79.70.32:8889/api/private/v1', // 跨域的域名
                changeOrigin: true, // 是否开启跨域
            }
        }
    }
}

原理分析：

1、axios.post('/login', ...) 实际请求的是本地服务器上的路径： http://localhost:8080/login 。但是，因为设置了devServer.proxy，所以代理服务会拦截请求路径为 /login 的请求，转而去请求 http://120.79.70.32:8889/api/private/v1/login 。

2、代理服务会将跨域域名(即target字段)和拦截的请求路径拼接在一起。

小结：

1 . 了解跨域问题产生的原因。
2 . 能够解决Vue项目开发阶段的跨域问题。
3 . 掌握derServer.proxy的基本使用和工作原理。

参考：

vue设置跨域proxy

跨域 - 解决方案

Vue设置proxy