Nginx CORS跨域

xiao7cn 發布于2019-07-25 14:09 / 2897人閱讀

摘要：場景我們的資源來自網絡的四面八方，所以難免需要用上跨域，業界也有非常多跨域的解決方案，這次我是來說說跨域與狀態碼之間的一個問題。

場景

我們的資源來自網絡的四面八方，所以難免需要用上跨域，業界也有非常多跨域的解決方案，這次我是來說說跨域與狀態碼之間的一個問題。

問題

當我們的 URL 地址返回的狀態碼是 400、403、404、500 的時候，跨域的資源是不會跟隨返回的，也就是說，即便是 Nginx 上配置了 add_header 關鍵字，也不會隨著內容返回而返回。

舉個例子說:

add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods *;

當我們在請求對應地址的時候，理應是會返回已經配置好的頭部信息，但是我們來看看最終的結果。

HTTP/1.1 200 OK
Server: openresty/1.11.2.2
Date: Fri, 26 Jan 2018 08:46:39 GMT
Content-Type: text/html; charset=UTF-8
Content-Length: 558
Last-Modified: Tue, 28 Mar 2017 01:13:24 GMT
Connection: keep-alive
ETag: "58d9b8b4-22e"
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: *
Accept-Ranges: bytes

內容無誤。

HTTP/1.1 404 Not Found
Server: openresty/1.11.2.2
Date: Fri, 26 Jan 2018 08:47:18 GMT
Content-Type: text/html; charset=UTF-8
Content-Length: 175
Connection: keep-alive

神奇了，這里404狀態碼下面居然自定義的響應頭消失了。

原因與解決方式

留意 Nginx 文檔上說的:

Adds the specified field to a response header provided that the response code equals 200, 201 (1.3.10), 204, 206, 301, 302, 303, 304, 307 (1.1.16, 1.0.13), or 308 (1.13.0). The value can contain variables.

意思就是說，add_header 只會追加到以上響應狀態碼的響應頭上面。

因為咱們的 API 有各種的狀態碼返回，那么其他狀態碼下，該怎么辦? 大家留意文檔上有一個參數。

Syntax:    add_trailer name value [**always**];
Default:    —
Context:    http, server, location, if in location
This directive appeared in version 1.13.2.

你會發現有個 [always] 參數，那么這個參數，就是讓你的配置頭，應用在所有的影響上面去。

將參數添加進去:

add_header Access-Control-Allow-Origin * always;
add_header Access-Control-Allow-Methods * always;

重啟 nginx 服務器后重試一下.

HTTP/1.1 200 OK
Server: openresty/1.11.2.2
Date: Fri, 26 Jan 2018 09:01:36 GMT
Content-Type: text/html; charset=UTF-8
Content-Length: 558
Last-Modified: Tue, 28 Mar 2017 01:13:24 GMT
Connection: keep-alive
ETag: "58d9b8b4-22e"
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: *
Accept-Ranges: bytes

200請求沒變化，一切正常。

HTTP/1.1 404 Not Found
Server: openresty/1.11.2.2
Date: Fri, 26 Jan 2018 09:02:12 GMT
Content-Type: text/html; charset=UTF-8
Content-Length: 175
Connection: keep-alive
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: *

現在 404 也正確了。我們的跨域也正是配置完成。

關于 OPTIONS 請求

當我們前端發起跨域請求的時候，會事先發起一次 OPTIONS 請求，以用來查詢該接口是否支持跨域和對應的請求方法。

在配置方面可以這么做。

if ($request_method = OPTIONS) {
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods *;
    add_header Access-Control-Allow-Credentials true;
    return 204;
   }

當然我這里的 * 這么用是不好的，你需要對應域名去配置。

另外PHP方面我們也提供了一個 CORS 的擴展庫，可以直接在fastd中使用。

github: cors-provider

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

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

CORS跨域與Nginx反向代理跨域優劣對比

摘要：最近寫了一些關于前后端分離項目之后，跨域相關方案的基本原理和常見誤區的帖子，主要包括和反向代理。反向代理此時后端相當于不跨域，和正常請求一致，無需額外配置。最近寫了一些關于前后端分離項目之后，跨域相關方案的基本原理和常見誤區的帖子，主要包括CORS和Nginx反向代理。這兩種方案項目中都有在用，各有優缺，關于具體使用哪種方案，大家的觀點也不大一致，本文主要就此展開一下，從前后端及服務...

yiliang 2019-07-25 14:26 評論0 收藏0
CORS方式實現ajax跨域 --- nginx配置

摘要：目前，所有瀏覽器都支持該功能，瀏覽器不能低于。因此，實現通信的關鍵是服務器。如果指定的域名在許可范圍內，服務器返回的響應，會多出頭信息字段也可能多出其他可選字段或者是表示接受任意域名的請求。實際跨域問題及其解決方案 1.課題：ajax實現跨域訪問 2.背景： 1.畫面服務器：192.168.196.6 → tomcat服務2.js模板服務器：192.168.196.8 → ngi...

csRyan 2019-07-25 14:23 評論0 收藏0
徹底弄懂跨域問題

摘要：用于告知瀏覽器可以將預先檢查請求返回結果緩存的時間，在緩存有效期內，瀏覽器會使用緩存的預先檢查結果判斷是否發送跨域請求。跨域，老生常談的問題簡述作為一只前端菜鳥，跨域方面只懂得JSONP和CORS，并未曾深入了解。但隨著春招越來越近，就算是菜鳥也要猛振翅膀。近幾日仔細研究了跨域問題，寫下這篇文章，希望對開發者們有所幫助。在讀本文前，希望您對以下知識略有了解。瀏覽器同源策略 n...

rose 2019-07-25 14:36 評論0 收藏0
跨域問題匯總

摘要：因為瀏覽器的同源策略，前端開發會遇到各種跨域問題。前言在總結各種跨域問題之前，我們先來了解一下瀏覽器的同源策略。所以只能解決一級域名相同二級域名不同的跨域問題。跨域問題的場景和解決方案多種多樣，只要是做前端開發，總會遇到。而且面試時也是必問的問題。所以自己學習總結記錄一下。因為瀏覽器的同源策略，前端開發會遇到各種跨域問題。本篇文章總結了遇到跨域問題的不同的場景以及對應的解決方案。 ...

MkkHou 2019-08-21 17:46 評論0 收藏0