使用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

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐