webpack配置proxy反向代理,解决跨域问题

目的:为了解决前端和后端联调数据,出现的跨域问题,通过配置反向代理,可以更好的联调数据

webpack官网

常见跨域场景

(1)同一域名,不同端口
http://www.demo.com:8000/a.js
http://www.demo.com/b.js
(2)同一域名,不同协议
http://www.demo.com/a.js
https://www.demo.com/b.js
(3)域名和域名对应相同ip
http://www.demo.com/a.js
http://127.0.0.1/b.js
(4)不同域名
http://www.demo1.com/a.js
http://www.demo2.com/b.js

前端常用解决方案

(1)通过jsonp跨域:只能发get请求,数据量不能超过4K
(2)跨域资源共享(CORS):需服务端设置Access-Control-Allow-Origin即可,前端无须设置,若要带cookie请求:前后端都需要设
(3)反向代理:在浏览器中创建了代理服务器,缺点渲染效率降低

反向代理
配置反向代理
//vue-cli3.0 里面的 vue.config.js做配置
const url = 'http://192.168.0.111:9999' //服务器端接口地址
module.exports = {
  //...
  devServer: {
    proxy: {
        '/api': {                //这里最好有一个 /
            target: url,         // 服务器端接口地址
            ws: true,            //如果要代理 websockets,配置这个参数
            secure: false,       // 如果是https接口,需要配置这个参数
            changeOrigin: true,  //是否跨域
            pathRewrite:{'^/api':''}
        }
    }
  }
};

此时访问的接口地址在本地被解析为localhost:8080/api/***

访问的真实地址是http://192.168.0.111:9999***

正向代理隐藏真实客户端地址,反向代理则隐藏真实服务端地址

详情

http://192.168.0.111:9999上有后端服务的话,你可以这样启用代理:

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': 'http://192.168.0.111:9999'
    }
  }
};

请求到/api/users现在会被代理到请求http://192.168.0.111:9999/api/users

如果你不想始终传递 /api ,则需要重写路径:

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': {
        target: 'http://192.168.0.111:9999',
        pathRewrite: {'^/api' : ''}
      }
    }
  }
};

默认情况下,不接受运行在HTTPS上,且使用了无效证书的后端服务器。如果你想要接受,修改配置如下:

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': {
        target: 'https://other-server.example.com',
        secure: false
      }
    }
  }
};

如果你想要代理多个路径特定到同一个 target 下,你可以使用由一个或多个「具有 context 属性的对象」构成的数组:

module.exports = {
  //...
  devServer: {
    proxy: [{
      context: ['/auth', '/api'],
      target: 'http://192.168.0.111:9999',
    }]
  }
};

你可能感兴趣的:(webpack配置proxy反向代理,解决跨域问题)