Nginx 配置跨越支持

jkyin 發布于2019-07-25 14:47 / 2195人閱讀

摘要：閱讀原文在日常的開放中，我們經常遇到跨域的問題，常用的處理方式都是在代碼層添加支持，但若你有配置權限，在上處理跨域將使得程序異常簡單和高效。

用你最美的姿態，去「跨域」那座山。閱讀原文

在日常的開放中，我們經常遇到跨域的問題，常用的處理方式都是在代碼層添加 cors 支持，但若你有 Nginx 配置權限，在 Nginx 上處理跨域將使得程序異常簡單和高效。

代理

假設我們的前端域名為 example.com，API 服務架設在 api.example.com 域名下，那我們可以通過代理的形式來配置跨越請求，具體的配置為：

在 Nginx 的 example.com 虛擬主機文件中配置如下的代理

配置成功重啟后，前端即可用 example.com/api 的方式和 API 交互

# /etc/nginx/sites-enabled/example.com.conf

location /api/ {
    proxy_pass http://api.example.com/;    
}

這種方式的原理是將 API 提供的服務，代理到前端域名的二級目錄下，從而避免跨域。

Response Header

當然由于很多情況下我們不想將服務代理到前端域名二級目下，那可以通過在 Http Response 中添加 Header 來解決跨越，具體配置如下：

# /etc/nginx/snippets/cors.conf;

if ($request_method = "OPTIONS") {
    add_header "Access-Control-Allow-Origin" "*" always;
    add_header "Access-Control-Allow-Methods" "GET, POST, OPTIONS, PUT, DELETE" always;
    add_header "Access-Control-Allow-Headers" "DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization,Content-Disposition" always;
    add_header "Access-Control-Max-Age" 1728000 always;

    add_header "Content-Length" 0;
    add_header "Content-Type" "text/plain; charset=utf-8";

    return 204;
}

if ($request_method ~* "(GET|POST|DELETE|PUT)") {
    add_header "Access-Control-Allow-Origin" "*" always;
}

關于何時會發起 OPTIONS 請求及 OPTIONS 請求的內容，可參考阮老師的這篇文章—— 跨域資源共享 CORS 詳解

然后在 API 服務域名下添加 CORS 支持即可

# /etc/nginx/sites-enabled/api.example.com.conf

location / {
    try_files $uri $uri/ /index.php?$query_string;
}

location ~ .php$ {
    // 引入 cors 配置
    include snippets/cors.conf;

    fastcgi_split_path_info ^(.+.php)(/.+)$;
    fastcgi_pass unix:/var/run/php/php7.2-fpm.sock;
    ...
    ...
}

注意 include snippets/cors.conf 這段代碼的位置，若直接放在 location 中，是不起作用的，如下所示：

location / {
    include snippets/cors.conf;

    try_files $uri $uri/ /index.php?$query_string;
}

這是因為下面的 try_files 將請求 Forward 到了 location ~ .php$ 這個 block 下，在此之前添加的 add_header 命令是無效的。

enjoy ～_～

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/40457.html

大話javascript 5期：跨域

摘要：同源策略所謂同源是指協議，域名，端口均相同。同源策略是瀏覽器的一個安全功能，不同源的客戶端腳本在沒有明確授權的情況下，不能讀寫對方資源。需注意的是由于同源策略的限制，所讀取的為跨域請求接口所在域的，而非當前頁。一、什么是跨域 1.URL解析 URL （Uniform Resource Locator ）統一資源定位符（URL）是用于完整地描述Internet上網頁和其他資源的地址的...

jzzlee 2019-08-23 16:42 評論0 收藏0
Rancher 開源私有云（Docker 容器部署及管理平臺）快速體驗

摘要：老徐是一個開源的企業級全棧化容器部署及管理平臺。為容器提供一攬子基礎架構服務兼容的網絡服務存儲服務主機管理負載均衡防護墻讓上述服務跨越公有云私有云虛擬機物理機環境運行，真正實現一鍵式應用部署和管理。已有超過萬次下載，生產環境的應用。 showImg(https://segmentfault.com/img/remote/1460000013588742?w=40&h=40);老徐Su...

CoffeX 2019-06-28 16:22 評論0 收藏0
解決前端開發環境中的的跨域問題

摘要：二解決思路知道是客戶端瀏覽器為了安全使用同源策略導致的，而服務端是沒有這個限制的，那我們就只能通過服務端進行跨域了。哈哈，這也是為啥后端和生產環境下比較少聽說跨域的問題，所以這里介紹開發環境中的幾種方法。一、為什么會有跨越問題是客戶端瀏覽器同源策略導致的，就是瀏覽器不允許不同源的站點相互訪問。試想一下要是沒有這個，那站點里的安全信息如cookie，賬號/密碼等是不是很容易被其它站點獲...

Youngs 2019-08-02 15:21 評論0 收藏0
前端常見跨域解決方案（全）

摘要：需注意的是由于同源策略的限制，所讀取的為跨域請求接口所在域的，而非當前頁。目前，所有瀏覽器都支持該功能需要使用對象來支持，也已經成為主流的跨域解決方案。反向代理接口跨域跨域原理同源策略是瀏覽器的安全策略，不是協議的一部分。什么是跨域？跨域是指一個域下的文檔或腳本試圖去請求另一個域下的資源，這里跨域是廣義的。廣義的跨域： 1.) 資源跳轉： A鏈接、重定向、表單提交 2.) 資源...

canger 2019-07-25 15:04 評論0 收藏0
靈雀云CTO陳愷：從“鴻溝理論”看云原生，哪些技術能夠跨越鴻溝？

摘要：早在年針對高科技行業和高科技企業生命周期的特點，提出了著名的鴻溝理論。今天我們嘗試以鴻溝理論為基礎來分析云原生領域顛覆性的創新技術。回過頭來看，靈雀云從早期全力投入技術棧，是最早進行產品化的廠商。歷史進入2019年，放眼望去，今天的整個技術大環境和生態都發生了很大的變化。在己亥豬年春節剛剛過去的早春時節，我們來梳理和展望一下整個云原生技術趨勢的發展，是一件很有意義的事情，這其中有些變...

hss01248 2019-07-01 17:09 評論0 收藏0