Nginx的跨域配置

使用SpringBoot开发前后端分离的应用,可以使用Nginx作为网关来统一解决跨域问题。这种好处是,可以不修改应用代码的情况下,让应用支持跨域。

对于很多不支持的跨域的网站,你也可以弄个Nginx给它“加个Buff”,也就可以进行跨域访问了。 :laughing:

Nginx配置(这个配置,可以解决 95% 以上的跨域问题)

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,现在就是个好机会,Nginx官网

SpringBoot Controller

// 在 8080 端口 提供服务
@RequestMapping("/test")
@RestController
public class TestController {
	
	@GetMapping("/cors")
	public Object corsTest () {
		return Collections.singletonMap("name", "SpringBoot中文社区");
	}
}

测试

浏览器新开一个页面就可以进行测试,主要能执行js。跨域嘛,只要是端口,url,协议。任意不同就可以了。

跨域失败

直接请求SpringBoot服务(8080端口),跨域失败。
image

跨域成功

请求Nginx网关服务(80端口),跨域成功
image

1 个赞

我不信

这次信我 :grinning: