+86 135 410 16684Mon. - Fri. 10:00-22:00

CORS on Nginx 实践小记

CORS on Nginx 实践小记

CORS on Nginx 实践小记

Nginx碰过好几次了,一次比一次熟,了解的配置也越来越多。跨域问题经常会碰到,这次尝试通过Nginx来解决跨域问题。

关于跨域,SegmentFault里面有篇详解JS跨域的文章。

实践部分

以下是自己的情况:
A: 前端Web应用,访问地址是http://yunwei123.com:33867
B: 服务器,提供api服务,地址是https://yunwei123.com:8383

因为这里A和B的协议和端口都不同,所以需要在后端进行允许跨域的配置。

Nginx需要做的就是,提供一个转发端口,与A和B都不同(否则会影响到A和B的访问),在这里取33868。并且,转发的同时还要给报文的报头添加允许跨域的标记,Nginx官方文档提供了CORS on Nginx的详细配置信息。因为这里开发的Web应用是一套开发工具,只用于本地开发而不会用在生产环境,所以最后我取了最简洁的配置,配置文件关键内容如下

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
// xxx.conf
server {
listen 33868 ssl;
listen [::]:33868 ssl;
server_name localhost;
# ssl
ssl_certificate /usr/local/etc/nginx/cert.pem;
ssl_certificate_key /usr/local/etc/nginx/cert.key;
# /api/
location /api/ {
#enable CORS
// 服务端允许的跨域来源URL
add_header ‘Access-Control-Allow-Origin’ ‘*’ always;
// 服务端允许的跨域方法
add_header ‘Access-Control-Allow-Methods’ ‘GET, POST, DELETE, PUT, OPTIONS';
// 若是OPTION方法请求,直接返回200,详见最后。
if ($request_method = OPTIONS) {
return 200;
}
// 转发到后端的URL
proxy_pass https://localhost:8383/;
}
}

总结

跨域问题可能会经常碰到,但配置好以后基本就不用管了。跨域背后最重要的还是安全考虑,盲目enable跨域而不做校验也会造成问题,生产环境一定要对非简单请求发送的options方法请求进行验证。更多信息可参见跨域资源共享(CORS)安全性浅析