前端跨域解决 - webpack本地代理proxy

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域

直接访问则会报错

此为vue-cli脚手架3.0

vue.config.js配置

module.exports = {
   devServer: {
        proxy: {
            "/api": {
              target: "http://26.15.12.39:8088", // 前端需要跨域的后端接口
              changeOrigin: true，  // 是否跨域
              pathRewrite: {
                 '^/api': '/' 
              }                     // 本身有api不需要写pathRewrite,没有就加上这个
        }
   }
}

原理说明：

proxy工作原理实质上是利用http-proxy-middleware这个http代理中间件，实现请求转发给其他服务器

而且重要的是webpack proxy只能用作于开发阶段，临时解决本地请求服务器产生的跨域问题，并不适用线上环境