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 这个地址。