2019獨角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>

摘自《AngularJS深度剖析與最佳實踐》P132

nginx配置文件如下：

server {listen 80;server_name your.domain.name;location / {# 把跟路徑下的請求轉(zhuǎn)發(fā)給前端工具鏈（如gulp）打開的開發(fā)服務(wù)器# 如果是產(chǎn)品環(huán)境，則使用root等指令配置為靜態(tài)文件服務(wù)器proxy_pass http://localhost:5000/;}location /api/ {# 把 /api 路徑下的請求轉(zhuǎn)發(fā)給真正的后端服務(wù)器proxy_pass http://localhost:8080/service/;# 把host頭傳過去，后端服務(wù)程序?qū)⑹盏統(tǒng)our.domain.name, 否則收到的是localhost:8080proxy_set_header Host $http_host;# 把cookie中的path部分從/api替換成/serviceproxy_cookie_path /api /service;# 把cookie的path部分從localhost:8080替換成your.domain.nameproxy_cookie_domain localhost:8080 your.domain.name }}

配置完成后重啟nginx服務(wù)：

nginx -s reload

?

flying get√ 總是要拼了命繼續(xù)努力

?目前很多網(wǎng)站都是用前后端完全分離的模式實現(xiàn)，即：后端通過API提供數(shù)據(jù)，前端使用API獲取數(shù)據(jù)并渲染。不過這樣做會存在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_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解析出來，方便后面的配置處理。

轉(zhuǎn)載于:https://my.oschina.net/u/930306/blog/769840

總結(jié)

以上是生活随笔為你收集整理的nginx配置反向代理解决前后端分离跨域问题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。