Nginx_跨域问题

什么是跨域

跨域：指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。

例如：a页面想获取b页面资源，如果a、b页面的协议、域名、端口、子域名不同，所进行的访问行动都是跨域的，而浏览器为了安全问题一般都限制了跨域访问，也就是不允许跨域请求资源。注意：跨域限制访问，其实是浏览器的限制。理解这一点很重要！！！

同源策略：是指协议，域名，端口都要相同，其中有一个不同都会产生跨域；

碰到个跨域问题使用之前的方法不能解决，终于找到解决方法如下

A调B发生跨域，应该在B上配置跨域

# #设置跨域配置 Start
set $cors_origin "";
if ($http_origin ~* "^https://co-customer-pre.bhfae.com$"){
        set $cors_origin $http_origin;
}

add_header Access-Control-Allow-Origin $cors_origin always; 
add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS always;
add_header Access-Control-Allow-Credentials true always;
add_header Access-Control-Allow-Headers DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization,x-auth-token always;
add_header Access-Control-Max-Age 1728000 always;

# 预检请求处理
if ($request_method = OPTIONS) {
        return 204;
}
# #设置跨域配置 End

如何解决跨域

方法一修改nginx配置，不用修改应用代码

Nginx配置代码示例

server {
    listen 80;
    server_name localhost 127.0.0.1;
	location / {
		# 允许跨域请求的“域”
		add_header 'Access-Control-Allow-Origin' $http_origin;
		# 允许客户端提交Cookie
		add_header 'Access-Control-Allow-Credentials' 'true';
		# 允许客户端的请求方法
		add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, DELETE, PUT';
		# 允许客户端提交的的请求头
		add_header 'Access-Control-Allow-Headers' 'Origin, x-requested-with, Content-Type, Accept, Authorization';
		# 允许客户端访问的响应头
		add_header 'Access-Control-Expose-Headers' 'Cache-Control, Content-Language, Content-Type, Expires, Last-Modified, Pragma';
		# 处理预检请求
		if ($request_method = 'OPTIONS') {
			# 预检请求缓存时间
			add_header 'Access-Control-Max-Age' 1728000;
			add_header 'Content-Type' 'text/plain; charset=utf-8';
			add_header 'Content-Length' 0;
			return 204;
		}
		
		# SpringBoot 应用访问路径
		proxy_pass http://127.0.0.1:8080;
		
		proxy_set_header Host $host;
		proxy_set_header X-Real-IP $remote_addr;
		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
		proxy_set_header X-Forwarded-Proto $scheme;
		
		proxy_connect_timeout 600;
		proxy_read_timeout 600;
	}
}

方法二 前后端使用同一nginx

方法三修改应用代码

相关文章

什么是跨域，如何解决
Nginx的跨域配置\

问题

跨域配置重复

has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header contains multiple values '*, *', but only one is allowed.

应该是访问链路中有两个地方都配置了跨域，导致冲突，删除一处跨域配置即可