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

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

实践部分

以下是自己的情况：
A: 前端Web应用，访问地址是http://localhost:33867
B: 服务器，提供api服务，地址是https://localhost: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)安全性浅析。