记一个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的认证信息了,然后再进行页面的直接访问接口就可以正常使用了。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 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,谁才是开发者新宠?