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