Nginx处理前端跨域（补充）

Posted 2022-09-24 hanshuai

　　在之前的博客中提到了用nginx来处理前后端跨域问题，用Nginx代理请求，处理前后端跨域 ，虽然解决当时了问题，但是在实际使用中还是不好用，当时应对的只是对单接口的处理，如果一个页面需要调用两个不同接口（对应后台的不同工程）时候就出问题了。出现这种问题的原因跟后端开发人员工程混乱也有关系，比如a项目代码中处理了跨域，b项目在nignx代理上做了跨域处理。而我的处理办法是针对所有的请求在本地都添加 Access-Control-Allow-Origin 为 $http_origin （nignx特有字段，意思是请求域）字段到服务端，单独访问a项目是没问题的，如果在调用a项目的时候同时调用b项目就会报错，浏览器提示  Access-Control-Allow-Origin 字段被写了两次，报错类似下边：

Access to XMLHttpRequest at ‘http://localhost:9090/getUser‘ from origin ‘http://a.com‘ has been blocked by CORS policy: The ‘Access-Control-Allow-Origin‘ header contains multiple values ‘http://a.com, *, but only one is allowed.

　　最简单粗暴的办法是针对后台接口每个做不同的处理，拜托，这tm太麻烦了。。。最后想到了一个问题，我可以用nginx把前端代码和后台代码代理到同一端口，这不就大功告成了吗。。。开始搞起来，nginx配置文件如下：

upstream test01
    server b.com; // 服务器a


upstream test02
    server a.com; // 服务器b


server 
	listen 80; // 将前后端代理到同一端口
	server_name localhost;
	
	
	location /user 
		proxy_pass http://test01; // user接口
	
	location /role
		proxy_pass http://test01; // role接口
	
        
        ... 
	
	location / 
		proxy_pass http://127.0.0.1:8080; // 前端工程地址，不能是localhost
	

　　注意一个细节，我打注释的地方，必须为127.0.0.1，刚开始的时候我写的localhost，前端项目跑起来的后，访问 http://localhost ，发现本地静态js文件一直pending状态，过好长时间才能访问，这不能忍啊...为啥访问个本地文件都这么慢？难道是我开代理的问题吗？难道是本地hosts文件没有配置localhost吗？就差临门一脚了，就是用不了。。。过了好长时间，我偶然间将localhost修改为127.0.0.1，我重新跑起项目，哈，这酸爽....

　　现在开发调试问题是解决了，但是强迫症的我，看着后台接口那一堆location很少头疼（代码中我用...省略了），于是我在想能不能把所有的接口地址写一块，省的写那么多相同的 proxy_pass http://test01; ，比如我说我要切换一台服务器测试，我得改那么多的proxy_pass 。。。

　　最终我用正则改进了这种写法（有的人可能觉得之前的写法清晰，看个人喜好吧？我是强迫症忍不了啊 。。。），改完的配置如下，只需将后台接口location写到一块：

location ~ ^/(user|role|...) 
	proxy_pass http://test01; // user接口