隨著前后臺(tái)架構(gòu)的興起，以及各種小程序、客戶端等異地前端的部署架構(gòu)，相信大家都經(jīng)常會(huì)遇到CORS問(wèn)題，CORS問(wèn)題會(huì)阻止后臺(tái)數(shù)據(jù)的正常返回，如果你搜索相關(guān)錯(cuò)誤，你會(huì)遇到很多教程，教你修改Access-Control-Allow-Origin，解決CORS問(wèn)題。
那這里我要多說(shuō)一句，如果搜到的方案是讓你把Access-Control-Allow-Origin配置成*，請(qǐng)不要這么做，至少在生產(chǎn)環(huán)境不要這么做。
Access-Control-Allow-Origin配置成*什么意思？意思是允許任意網(wǎng)站跨域訪問(wèn)該服務(wù)端口，在這種情況下，任意一個(gè)前端程序都可以隨意集成該端口內(nèi)容，實(shí)現(xiàn)數(shù)據(jù)獲取。
那正確的方法是什么呢？應(yīng)該配置成為你允許的網(wǎng)站。例如百家飯的域名是rongapi.cn，訪問(wèn)方式是https，那就應(yīng)該是https://rongapi.cn/，最保險(xiǎn)的獲取該地址的方式是打開(kāi)你的前端調(diào)試窗口，查看任意網(wǎng)絡(luò)請(qǐng)求中標(biāo)頭里面origin的內(nèi)容，如下圖，請(qǐng)注意，有些地方會(huì)說(shuō)要用referer的值，但是從下圖我們可以看出，origin這個(gè)值和referer的值是不同的。
?那我們拿到這個(gè)origin的值，配置到Access-Control-Allow-Origin里面是完全沒(méi)有問(wèn)題的。
配置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)該怎么辦呢，我們?cè)谒阉髟摻鉀Q方案的時(shí)候，有時(shí)候會(huì)遇到有方案講，把多個(gè)域名同時(shí)添加到header里面，但是這個(gè)方案經(jīng)測(cè)試已經(jīng)過(guò)期或者不是一個(gè)正確方案。
正確的nginx配置方式是先測(cè)試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常見(jiàn)的錯(cuò)誤
post出錯(cuò)，get不出錯(cuò)
大量現(xiàn)代瀏覽器似乎會(huì)在post之前傳輸一個(gè)options來(lái)確認(rèn)服務(wù)器行為，該現(xiàn)象在ios和android之間不統(tǒng)一。
如果你的web服務(wù)器沒(méi)有能夠處理該行為的關(guān)聯(lián)關(guān)系，可能會(huì)出現(xiàn)get接口都是好的，但是post出錯(cuò)的情況，這時(shí)，我們需要為options操作配置一個(gè)特殊的返回結(jié)構(gòu)，例如我們用到的（從網(wǎng)上摘抄）文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-414629.html
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ù)請(qǐng)求，所以我們就不用麻煩去配?Access-Control-Allow-Origin了，反正正式請(qǐng)求的時(shí)候再判斷也可以。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-414629.html
到了這里，關(guān)于正確配置Access-Control-Allow-Origin，千萬(wàn)不要設(shè)置成*的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
