nginx配置反向代理解决前后端分离跨域问题
2016-10-23 00:00
1096 查看
摘自《AngularJS深度剖析与最佳实践》P132
nginx配置文件如下:server { listen 80; server_name your.domain.name; location / { # 把跟路径下的请求转发给前端工具链(如gulp)打开的开发服务器 # 如果是产品环境,则使用root等指令配置为静态文件服务器 proxy_pass http://localhost:5000/; } location /api/ { # 把 /api 路径下的请求转发给真正的后端服务器 proxy_pass http://localhost:8080/service/; # 把host头传过去,后端服务程序将收到your.domain.name, 否则收到的是localhost:8080 proxy_set_header Host $http_host; # 把cookie中的path部分从/api替换成/service proxy_cookie_path /api /service; # 把cookie的path部分从localhost:8080替换成your.domain.name proxy_cookie_domain localhost:8080 your.domain.name } }
配置完成后重启nginx服务:
nginx -s reload
flying get√ 总是要拼了命继续努力
目前很多网站都是用前后端完全分离的模式实现,即:后端通过API提供数据,前端使用API获取数据并渲染。不过这样做会存在API跨域的问题,这里介绍一种通过Nginx配置解决跨域问题的方法。
Nginx整体配置如下:
upstream service { server 127.0.0.1:8080; } map $http_origin $cors_header { default ""; "~^https?://localhost(:[0-9]+)?$" "$http_origin"; } server { listen 80; server_name 127.0.0.1; access_log /var/log/nginx/access.log; error_log /var/log/nginx/error.log; location = /favicon.ico { deny all; error_log off; access_log off; log_not_found off; } location /api/ { if ($request_method = 'OPTIONS') { add_header 'Content-Length' 0 always; add_header 'Content-Type' 'text/plain charset=UTF-8' always; add_header 'Access-Control-Allow-Origin' '$cors_header' always; add_header 'Access-Control-Allow-Credentials' 'true' always; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always; add_header 'Access-Control-Allow-Headers' 'Origin,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Accept,Cookie,Set-Cookie, X-AUTH-USER, X-AUTH-TOKEN' always; return 200; } if ($request_method = 'POST') { add_header 'Access-Control-Allow-Origin' '$cors_header' always; add_header 'Access-Control-Allow-Credentials' 'true' always; add_header 'Access-Control-Allow-Headers' 'Origin,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Accept,Cookie,Set-Cookie, X-AUTH-USER, X-AUTH-TOKEN' always; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always; } if ($request_method = 'GET') { add_header 'Access-Control-Allow-Origin' '$cors_header' always; add_header 'Access-Control-Allow-Credentials' 'true' always; add_header 'Access-Control-Allow-Headers' 'Origin,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Accept,Cookie,Set-Cookie, X-AUTH-USER, X-AUTH-TOKEN' always; add_ 7fe0 header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always; } uwsgi_pass service; include uwsgi_params; } }
API路径配置中的 "X-AUTH-USER, X-AUTH-TOKEN",是API中传递的自定义HEADER,需要在 "Access-Control-Allow-Headers"中指明。 其中,"map $http_origin $cors_header"将需要跨域的域名或者IP解析出来,方便后面的配置处理。
相关文章推荐
- nginx配置反向代理解决前后端分离跨域问题
- nginx配置反向代理解决前后端分离跨域问题
- Nginx 的使用配置并利用nginx 反向代理解决跨域问题
- nginx反向代理node,解决前后端跨域问题
- 前后端分离nginx配置,同时解决跨域问题
- 配置nginx反向代理服务器,解决浏览器跨域调用接口的限制问题
- 利用nginx 反向代理解决跨域问题
- 利用nginx 反向代理本地解决跨域问题
- 用反向代理nginx proxy_pass配置解决ie8 ajax请求被拦截问题 ie8用nginx代理实现跨域请求访问 nginx405正向代理request_uri
- Mac下使用nginx反向代理服务器解决资源跨域问题
- Nginx 反向代理解决跨域问题
- 利用nginx 反向代理解决跨域问题
- nginx反向代理时通过rewrite解决后端资源css/js/img 写了绝对路径的问题
- 解决Linux下ArcGIS Server的Tomcat不稳定问题,nginx配置反向代理时的一个小问题
- 前后端分离:利用nginx的rewrite解决跨域问题
- nginx反向代理多个tomcat 配置.解决因404问题js css无法加载问题
- 解决nginx使用proxy_pass反向代理时,session丢失的问题
- Nginx 配置反向代理后,页面中取绝对URL地址的问题显示代理端口
- nginx反向代理到后端tomcat,并将IP地址发送到后端的配置
- nginx反向代理tomcat、实现动静分离/配置文件