vue-cli 跨域问题代理解决方案:devServer配置

    科技2022-07-15  121

    背景:


    在我们使用Vue直接请求后端时,通常会报跨域问题,如下图:

    要解决这个问题,方案有很多种,最简单的莫过于vue-cli的devServer配置。

    devServer配置


    在vue项目下创建vue.config.js文件,如下图:

    在vue.config.js中写入devServer配置,例如:

    module.exports = { devServer: { proxy: { "/api": { target: "http://localhost:8081/", pathRewrite: { "^/api": "", }, }, }, }, };

    调用时,比如axios.get("/api/xxx");会被自动代理到http://localhost:8081/xxx上

    Processed: 0.012, SQL: 8