使用proxy代理请求地址,可以帮助隐藏http请求地址,并可解决跨域请求的问题

方案一:

vue.config.js配置(精简版)(不要配置其他多余的选项,只要proxy)

devServer: {
    port: 8088,
    proxy:"http://192.168.111.101:8081"
    // 下方配置无效,已屏蔽
    /* proxy: {
      '/api': {
        target: "http://192.168.111.101:8081",
        ws: true,
        changeOrigin: true,
        pathRewrite: { '^/api': '' }
      }
    } */
}

因vue.config.js已配置了代理,开发环境env.development的target设置为空'',axios是使用env.文件中的target作为baseURL的。

方案二:

vue.config.js配置(标准版)

devServer: {
    port: 8088,
    proxy: {
      '/api': {
        target: "http://192.168.111.101:8081",
        ws: true,
        changeOrigin: true,
        pathRewrite: { '^/api': '' }
      }
    }
}

因vue.config.js已配置了代理,开发环境env.development的target设置为空'/api',axios是使用env.文件中的target作为baseURL的。 

请求路径会多一个/api,并不影响请求数据,因已代理处理。

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐