溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

使用map實(shí)現(xiàn)Nginx允許多個(gè)域名跨域

發(fā)布時(shí)間:2020-10-26 14:10:44 來源:億速云 閱讀:522 作者:Leah 欄目:開發(fā)技術(shù)

使用map實(shí)現(xiàn)Nginx允許多個(gè)域名跨域?針對(duì)這個(gè)問題,這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答,希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡(jiǎn)單易行的方法。

常見的 Nginx 配置允許跨域

server {
  listen    11111;
  server_name localhost;

  location ~ /xxx/xx {
    if ($request_method = 'OPTIONS') {
      return 204;
    }
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
    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';
    proxy_pass http://1.2.3.4:5678;
  }
}

指定 Access-Control-Allow-Origin 為 ‘*' ,即為最簡(jiǎn)單暴力的允許所有訪問跨域

允許 Cookie

有些場(chǎng)景下需要使用 Cookie,這時(shí) Nginx 需要加一句 add_header Access-Control-Allow-Credentials 'true';,但此時(shí)會(huì)發(fā)現(xiàn)瀏覽器報(bào)錯(cuò),說該參數(shù)為 true 時(shí),allow origin 不能設(shè)置為 ‘*‘,如果手動(dòng)指定了多個(gè)域名,那同樣會(huì)被瀏覽器提示錯(cuò)誤,說 allow origin 不能設(shè)置多個(gè),這些是協(xié)議層面的限制

使用 map

在 Nginx 中可以使用 map 得到一個(gè)自定義變量,簡(jiǎn)單的使用可以參考官方文檔,在上面提到的場(chǎng)景中,可以對(duì)請(qǐng)求中的 origin 做一個(gè)過濾處理,把符合要求的請(qǐng)求域名放到一個(gè)變量中,在設(shè)置 allow origin 時(shí)使用該變量就能實(shí)現(xiàn)一個(gè)動(dòng)態(tài)的、多個(gè)的允許跨域域名

一個(gè)示例配置如下:

map $http_origin $allow_origin {
  default "";
  "~^(https?://localhost(:[0-9]+)?)" $1;
  "~^(https?://127.0.0.1(:[0-9]+)?)" $1;
  "~^(https?://172.10(.[\d]+){2}(:[0-9]+)?)" $1;
  "~^(https?://192.168(.[\d]+){2}(:[0-9]+)?)" $1;
}

server {
  listen    11111;
  server_name localhost;

  location ~ /xxx/xx {
    if ($request_method = 'OPTIONS') {
      return 204;
    }
    add_header Access-Control-Allow-Origin $allow_origin;
    add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
    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';
    add_header Access-Control-Allow-Credentials 'true';
    proxy_pass http://1.2.3.4:5678;
  }
}

解釋說明:

$http_origin 是 Nginx 的內(nèi)部變量,用于獲取請(qǐng)求頭中的 origin

$allow_origin 是可以自定義的變量名

關(guān)于使用map實(shí)現(xiàn)Nginx允許多個(gè)域名跨域問題的解答就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,如果你還有很多疑惑沒有解開,可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識(shí)。

向AI問一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI