隨著前后臺架構(gòu)的興起，以及各種小程序、客戶端等異地前端的部署架構(gòu)，相信大家都經(jīng)常會(huì)遇到CORS問題，CORS問題會(huì)阻止后臺數(shù)據(jù)的正常返回，如果你搜索相關(guān)錯(cuò)誤，你會(huì)遇到很多教程，教你修改Access-Control-Allow-Origin，解決CORS問題。

那這里我要多說一句，如果搜到的方案是讓你把Access-Control-Allow-Origin配置成*，請不要這么做，至少在生產(chǎn)環(huán)境不要這么做。

Access-Control-Allow-Origin配置成*什么意思？意思是允許任意網(wǎng)站跨域訪問該服務(wù)端口，在這種情況下，任意一個(gè)前端程序都可以隨意集成該端口內(nèi)容，實(shí)現(xiàn)數(shù)據(jù)獲取。

那正確的方法是什么呢？應(yīng)該配置成為你允許的網(wǎng)站。例如百家飯的域名是rongapi.cn，訪問方式是https，那就應(yīng)該是https://rongapi.cn/，最保險(xiǎn)的獲取該地址的方式是打開你的前端調(diào)試窗口，查看任意網(wǎng)絡(luò)請求中標(biāo)頭里面origin的內(nèi)容，如下圖，請注意，有些地方會(huì)說要用referer的值，但是從下圖我們可以看出，origin這個(gè)值和referer的值是不同的。

?那我們拿到這個(gè)origin的值，配置到Access-Control-Allow-Origin里面是完全沒有問題的。

配置Access-Control-Allow-Origin的方法

配置Access-Control-Allow-Origin的地點(diǎn)可以有很多，在通常的負(fù)載均衡-Web服務(wù)器架構(gòu)中，我們推薦可以在nginx配置中完成該配置。配置方法是在server段內(nèi)或者location段內(nèi)，添加

add_header 'Access-Control-Allow-Origin' 'xxxxx';

注意，配置成多域名不可以

那如果我們的業(yè)務(wù)域名是多個(gè)域名應(yīng)該怎么辦呢，我們在搜索該解決方案的時(shí)候，有時(shí)候會(huì)遇到有方案講，把多個(gè)域名同時(shí)添加到header里面，但是這個(gè)方案經(jīng)測試已經(jīng)過期或者不是一個(gè)正確方案。

正確的nginx配置方式是先測試http_origin是否符合要求，如果符合，將用戶傳入的http_origin填入中。

例如

location / {if ($http_origin ~* "^https?://(rongapi.cn|www.rongapi.cn)$") {add_header Access-Control-Allow-Origin "$http_origin";} }

這里用的是正則表達(dá)式，當(dāng)然直接使用=或者!=比較字符串也可以。

其他CORS常見的錯(cuò)誤

post出錯(cuò)，get不出錯(cuò)

大量現(xiàn)代瀏覽器似乎會(huì)在post之前傳輸一個(gè)options來確認(rèn)服務(wù)器行為，該現(xiàn)象在ios和android之間不統(tǒng)一。

如果你的web服務(wù)器沒有能夠處理該行為的關(guān)聯(lián)關(guān)系，可能會(huì)出現(xiàn)get接口都是好的，但是post出錯(cuò)的情況，這時(shí)，我們需要為options操作配置一個(gè)特殊的返回結(jié)構(gòu)，例如我們用到的（從網(wǎng)上摘抄）

if ($request_method = 'OPTIONS') {add_header 'Access-Control-Allow-Origin' '*';## Om nom nom cookies#add_header 'Access-Control-Allow-Credentials' 'true';add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';## Custom headers and headers various browsers *should* be OK with but aren't#add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';## Tell client that this pre-flight info is valid for 20 days#add_header 'Access-Control-Max-Age' 1728000;add_header 'Content-Type' 'text/plain charset=UTF-8';add_header 'Content-Length' 0;return 204;}

Options因?yàn)橹皇穷A(yù)請求，所以我們就不用麻煩去配?Access-Control-Allow-Origin了，反正正式請求的時(shí)候再判斷也可以。

總結(jié)

以上是生活随笔為你收集整理的正确配置Access-Control-Allow-Origin，千万不要设置成*的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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