前端添加代理通过nginx进行转发解决跨域

记录在项目中遇到跨域并进行解决的方案

前端代理部分

代理后页面请求地址截图：

这里地址栏的地址是：http://127.0.0.1:13908
调用登录接口请求地址是：http://127.0.0.1:13908/api/sys/login
后端网关的端口不是13908，是13909，且没有api，这里是前端加了代理

nginx转发

nginx配置如下，监听前端访问的端口，并且拦截并转发到我们需要的地址。

	server {
		listen       13908;        
		server_name  localhost;
		
		location / { 
 			root   /home/cdszwy/phase2Test/web/html;
            index  index.html;
            try_files $uri $uri/ /index.html;	
		}
		
		#/api  会拼在url后面（ http://127.0.0.1:13909/api/sys/login） ，/api/  不会拼在url后面( http://127.0.0.1:13909/sys/login)
		#拦截 端口 + /api, 然后做转发
		#遇到/api的请求 nginx 转发到某某 服务器ip端口
		#13908 是你前端的地址  好或者前端请求的端口
		location /api/ {
			proxy_pass   http://127.0.0.1:13909/;
		}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

配置origin限制,修复CORS跨域漏洞

第一种：

	
	map $http_origin $allow_cros {
		default 1;
		#这里的ip或者域名是你自己服务的，也就是你允许访问的地址进行匹配，可以添加多个，外部地址匹配不上将不允许访问
		"~^(http://127.0.0.1:13908)$" 1;
		"~*" 0;
	}
	server {
		listen       13908;        
		server_name  localhost;
		
		 # 指定允许其他域名访问        
         add_header Access-Control-Allow-Origin $http_origin;
         # 允许的请求类型
         add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
         # 许的请求头字段
         add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept";

		#验证origin是否匹配，不匹配则返回403，不允许访问
		if ($allow_cros = 0){
	     		return 403;
		}
		
		location / { 
 			root   /home/cdszwy/phase2Test/web/html;
            index  index.html;
            try_files $uri $uri/ /index.html;	
		}
		
		#/api  会拼在url后面（ http://127.0.0.1:13909/api/sys/login） ，/api/  不会拼在url后面( http://127.0.0.1:13909/sys/login)
		#拦截 端口 + /api, 然后做转发
		#遇到/api的请求 nginx 转发到某某 服务器ip端口
		#13908 是你前端的地址  好或者前端请求的端口
		location /api/ {
			proxy_pass   http://127.0.0.1:13909/;
		}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

第二种配置：

	server {
		listen       13908;        
		server_name  localhost;
		
		location / { 
 			root   /home/cdszwy/phase2Test/web/html;
            index  index.html;
            try_files $uri $uri/ /index.html;	
		}
		
		#/api  会拼在url后面（ http://127.0.0.1:13909/api/sys/login） ，/api/  不会拼在url后面( http://127.0.0.1:13909/sys/login)
		#拦截 端口 + /api, 然后做转发
		#遇到/api的请求 nginx 转发到某某 服务器ip端口
		#13908 是你前端的地址  好或者前端请求的端口
		location /api/ {
			set $allow_cors 0;
			# 判断不为空
			if ($http_origin) {
				set $allow_cors 1;
			}
			# 判断不在白名单内
			if ($http_origin !~* "(127.0.0.1)" ) {
				set $allow_cors "${allow_cors}1";
			}
			# 判断不为空 且 不在白名单内，返回403
			if ($allow_cors = "11") {
				return 403;
			}
			add_header 'Access-Control-Allow-Origin' $allow_cors always;
			add_header 'Access-Control-Allow-Credentials' 'false'  always;

			proxy_pass   http://127.0.0.1:13909/;
			access_log   /usr/local/nginx/log/uat-mobileapi-access.log;
			error_log    /usr/local/nginx/log/uat-mobileapi-error.log;
		}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

以上两种测试后都能满足该场景，但是设置：add_header ‘Access-Control-Allow-Origin’ $allow_cors always;并未生效，都是通过匹配原则进行判断来做的返回退出，后面有时间再进行验证 add_header的方式

有什么更好的欢迎留在评论区。

参考文章：
https://blog.csdn.net/qq_20236937/article/details/128640137
https://blog.csdn.net/qq_33204709/article/details/129232198
https://blog.csdn.net/zxd1435513775/article/details/102508463