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)反向代理:在浏览器中创建了代理服务器,缺点渲染效率降低

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

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

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

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

详情

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

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

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

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

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

未经允许不得转载:一点博客-青梅煮码-共享博客 » webpack配置proxy反向代理,解决跨域问题
分享到:
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏