vue-cli 3.0 前后端API接口联调时跨域处理

vue项目开发阶段，使用 npm run dev 或 npm run serve 启动本地调试，请求后端的API接口时提示跨域。因为vue是Node.js运行（端口8080），后端是PHP开发（端口9090），地址都是127.0.0.1，但端口号不一样，所以造成了跨域请求。

vue-cli官方文档提示，我们可以在 vue.config.js 配置文件里设置代理，文档链接：https://cli.vuejs.org/zh/config/#devserver-proxy

根据实际情况，我的配置如下：

module.exports = {
    publicPath: "/",
    outputDir: "dist",
    assetsDir: "static",
    lintOnSave: process.env.NODE_ENV === "development",
    productionSourceMap: false,
    devServer: {
        port: 8080,
        open: true,
        overlay: {
            warnings: false,
            errors: true
        },
        proxy: {
            "/devapi": {
                target: "http://127.0.0.1:9090/admin/api",
                changeOrigin: true,
                pathRewrite: {
                    "^/devapi": ""
                }
            }
        }
    }
};

其中“/devapi”是本地API接口请求的前缀，经过 pathRewrite 规则处理，实际代理请求时，它被替换为空字符串。target 是我们后台真正的API地址。changeOrigin 配置是否需要跨域，true 为跨域。

综上，当我们请求 http://127.0.0.1:8080/devapi/xxx 这样的地址时，vue-cli 就会把该请求代理到 http://127.0.0.1:9090/admin/api/xxx 这个地址。