nginx解决跨域

Nginx 解决API跨域问题

 

利用Nginx可以最简单且高效解决跨域问题。

跨域是前后端分离开发中非常常见的问题。这个问题网上已经有非常多的答案，但大部分是编程框架里面添加CORS头。但无论用什么Web框架，现已很难离开Nginx。因此直接在Nginx中处理跨域问题有得天独厚的优势，可以将OPTIONS请求拦截在API服务之前，节约服务器开销。

简单说，跨域分为简单跨域和复杂跨域。

简单跨域不会发送OPTIONS请求。

复杂跨域会发送一个预检查OPTIONS请求。

复杂跨域的条件是：

1. 非GET、HEAD、POST请求。
2. POST请求的Content-Type不是application/x-www-form-urlencoded, multipart/form-data, 或text/plain。
3. 添加了自定义header，例如Token。

跨域请求浏览器会在Headers中添加Origin，通常情况下不允许用户修改其值。

配置示例

server {
        listen 80;
        server_name _;
        charset utf-8;
        location / {
                if ($http_origin ~ '^http(s)?://(localhost|www\.你的域名\.com)$') {
                        add_header 'Access-Control-Allow-Origin' "$http_origin" always;
                        add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always;
                        add_header 'Access-Control-Allow-Headers' 'Accept, Authorization, Cache-Control, Content-Type, DNT, If-Modified-Since, Keep-Alive, Origin, User-Agent, X-Requested-With, Token, x-access-token' always;
                }

                if ($request_method = 'OPTIONS') {
                        add_header 'Access-Control-Allow-Origin' "$http_origin" always;
                        add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always;
                        add_header 'Access-Control-Allow-Headers' 'Accept, Authorization, Cache-Control, Content-Type, DNT, If-Modified-Since, Keep-Alive, Origin, User-Agent, X-Requested-With, Token, x-access-token' always;
                        # Tell client that this pre-flight info is valid for 20 days
                        add_header 'Access-Control-Max-Age' 1728000;
                        add_header 'Content-Type' 'text/plain charset=utf-8';
                        add_header 'Content-Length' 0;
                        return 204;
                }

                proxy_http_version 1.1;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header Host $host;
                proxy_set_header X-NginX-Proxy true;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection "upgrade";
                proxy_pass http://127.0.0.1:8080;
                proxy_redirect off;
        }
}

CRUL跨域测试

GET请求成功返回跨域头：

➜  ~ curl -I -H "Origin: http://localhost" http://localhost
HTTP/1.1 403 Forbidden
Server: nginx/1.15.6
Date: Wed, 14 Nov 2018 07:56:01 GMT
Content-Type: text/html; charset=utf-8
Content-Length: 153
Connection: keep-alive
Access-Control-Allow-Origin: http://localhost
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Headers: Accept, Authorization, Cache-Control, Content-Type, DNT, If-Modified-Since, Keep-Alive, Origin, User-Agent, X-Requested-With, Token, x-access-token

OPTIONS预检请求成功返回跨域头：

➜  ~ curl -I -H "Origin: http://localhost" -X OPTIONS http://localhost
HTTP/1.1 204 No Content
Server: nginx/1.15.6
Date: Wed, 14 Nov 2018 08:19:36 GMT
Connection: keep-alive
Access-Control-Allow-Origin: http://localhost
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Headers: Accept, Authorization, Cache-Control, Content-Type, DNT, If-Modified-Since, Keep-Alive, Origin, User-Agent, X-Requested-With, Token, x-access-token
Access-Control-Max-Age: 1728000
Content-Type: text/plain charset=utf-8
Content-Length: 0