记一个http-proxy-middleware 代理访问nginx映射的接口不通过的问题(connection close)

  工作过程中遇见一个问题,使用Vue-cli 搭建了一个工程,由于跨域的问题 使用了自带的dev-server Express Server(A后台) http-proxy-middleware 去访问后台的接口nginx Server(B后台),而这个接口为niginx 代理的另一个后台(C后台),理清一下关系:

  开发页面去请求A后台(devServer)的接口, 然后这个请求会被转发的B后台(nginx), 然后再会被nginx映射到C后台(我们真实要访问的后台),你可能会问为什么不用A直接去代理访问C, 非要在中间加了个nginx呢 ? 由于C是个交换机设备上的server, 直接用我的A (devServer)去代理C不好使,所以才有这样的情景。

  从B到C的过程一切都很正常,但是从A到B中间的每次的请求返回时connection 都是close , 而正常的是keep-alive的,这就导致我在页面里登录成功后 继续请求其他接口还是验证不通过。网上找了好多资料都不好使。

  最终解决方案是,(当一条路走不通的时候,换一条试试):

  跨域问题解决的方法之一, CORS 

  通过修改ngnix配置文件,加入allow-origin头

1
2
3
4
5
6
7
location ~ \.do$ {
add_header 'Access-Control-Allow-Origin' 'http://localhost:8080'; //这个是我的A devServer,必须设置具体的值,不要使用* 否则访问接口的时候浏览器会报错
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Credentials' true;
add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
    proxy_pass   http://172.16.15.65;
}

  配置完这个重启nginx然后你的页面里直接写B的接口就不会存在跨域问题了,但是这个时候如果登录的过程中产生了一个cookie这个信息在你后面访问借口的时候不会自动添加上的,需要在你的ajax里面加上withCredentials,例如jquery 的ajax

1
2
3
4
5
6
7
8
9
10
11
12
13
$.ajax({
       url : "*****",
       type : post,
       dataType : params.dataType,
       data : cliPostData,
       cache : false,
       //注意这里
       xhrFields: {
         withCredentials: true
       },
       success : function(data) {       
       }    
 })

  这样就可以携带cookie的认证信息了,然后再进行页面的直接访问接口就可以正常使用了。

posted @   断劫断念  阅读(2737)  评论(1编辑  收藏  举报
编辑推荐:
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· 展开说说关于C#中ORM框架的用法!
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
点击右上角即可分享
微信分享提示