什么是跨域

• 請(qǐng)求協(xié)議（http,https）不同
• 域名（domain）不同
• 端口（port）不同

更詳細(xì)的說(shuō)明可以看下表：

準(zhǔn)備

前端網(wǎng)站地址：http://localhost:8080

服務(wù)端網(wǎng)址：http://localhost:59200

首先保證服務(wù)端是沒(méi)有處理跨域的枷邪，其次，先用postman測(cè)試服務(wù)端接口是正常的

當(dāng)網(wǎng)站8080去訪問(wèn)服務(wù)端接口時(shí)，就產(chǎn)生了跨域問(wèn)題玖详，那么如何解決？

接下來(lái)我把跨域遇到的各種情況都列舉出來(lái)并通過(guò)nginx代理的方式來(lái)解決勤讽。

跨域主要涉及4個(gè)響應(yīng)頭：

• Access-Control-Allow-Origin 用于設(shè)置允許跨域請(qǐng)求源地址 （預(yù)檢請(qǐng)求和正式請(qǐng)求在跨域時(shí)候都會(huì)驗(yàn)證）

• Access-Control-Allow-Headers 跨域允許攜帶的特殊頭信息字段 （只在預(yù)檢請(qǐng)求驗(yàn)證）

• Access-Control-Allow-Methods 跨域允許的請(qǐng)求方法或者說(shuō)HTTP動(dòng)詞 （只在預(yù)檢請(qǐng)求驗(yàn)證）

• Access-Control-Allow-Credentials 是否允許跨域使用cookies蟋座，如果要跨域使用cookies，可以添加上此請(qǐng)求響應(yīng)頭脚牍，值設(shè)為true（設(shè)置或者不設(shè)置向臀，都不會(huì)影響請(qǐng)求發(fā)送，只會(huì)影響在跨域時(shí)候是否要攜帶cookies诸狭，但是如果設(shè)置券膀，預(yù)檢請(qǐng)求和正式請(qǐng)求都需要設(shè)置）。不過(guò)不建議跨域使用（項(xiàng)目中用到過(guò)驯遇，不過(guò)不穩(wěn)定芹彬，有些瀏覽器帶不過(guò)去），除非必要叉庐，因?yàn)橛泻芏喾桨缚梢源妗?/p>

網(wǎng)上很多文章都是告訴你直接Nginx添加這幾個(gè)響應(yīng)頭信息就能解決跨域舒帮，當(dāng)然大部分情況是能解決，但是我相信還是有很多情況，明明配置上了会前，也同樣會(huì)報(bào)跨域問(wèn)題好乐。

什么是預(yù)檢請(qǐng)求？

當(dāng)發(fā)生跨域條件時(shí)候瓦宜，覽器先詢問(wèn)服務(wù)器蔚万，當(dāng)前網(wǎng)頁(yè)所在的域名是否在服務(wù)器的許可名單之中，以及可以使用哪些HTTP動(dòng)詞和頭信息字段临庇。只有得到肯定答復(fù)反璃，瀏覽器才會(huì)發(fā)出正式的XMLHttpRequest請(qǐng)求，否則就報(bào)錯(cuò)假夺。

開(kāi)始動(dòng)手模擬：

Nginx代理端口：22222 ,配置如下

[[圖片上傳失敗...(image-f14974-1678155478063)]](javascript:void(0); "復(fù)制代碼")

server {
        listen 22222;
        server_name  localhost;
 location  / {
            proxy_pass  http://localhost:59200;
 }
}

測(cè)試代理是否成功淮蜈，通過(guò)Nginx代理端口2222再次訪問(wèn)接口，可以看到如下圖通過(guò)代理后接口也是能正常訪問(wèn)

接下來(lái)開(kāi)始用網(wǎng)站8080訪問(wèn)Nginx代理后的接口地址已卷，報(bào)錯(cuò)情況如下:

情況1：

通過(guò)錯(cuò)誤信息可以很清晰的定位到錯(cuò)誤（注意看標(biāo)紅部分）priflight說(shuō)明是個(gè)預(yù)請(qǐng)求梧田，CORS 機(jī)制跨域會(huì)首先進(jìn)行 preflight（一個(gè) OPTIONS 請(qǐng)求）， 該請(qǐng)求成功后才會(huì)發(fā)送真正的請(qǐng)求侧蘸。 這一設(shè)計(jì)旨在確保服務(wù)器對(duì) CORS 標(biāo)準(zhǔn)知情裁眯，以保護(hù)不支持 CORS 的舊服務(wù)器

通過(guò)錯(cuò)誤信息，我們可以得到是預(yù)檢請(qǐng)求的請(qǐng)求響應(yīng)頭缺少了 Access-Control-Allow-Origin讳癌，錯(cuò)哪里穿稳，我們改哪里就好了。

修改Nginx配置信息如下:

server {
        listen       22222;
        server_name  localhost;
        location  / {
           #新增加部分
           add_header Access-Control-Allow-Origin 'http://localhost:8080';
           proxy_pass  http://localhost:59200; 
        }
    }

加完發(fā)現(xiàn)還有問(wèn)題

不過(guò)我們的配置沒(méi)什么問(wèn)題,問(wèn)題在Nginx,下圖鏈接http://nginx.org/en/docs/http/ngx_http_headers_module.html

add_header 指令用于添加返回頭字段晌坤，當(dāng)且僅當(dāng)狀態(tài)碼為圖中列出的那些時(shí)有效逢艘。如果想要每次響應(yīng)信息都攜帶頭字段信息，需要在最后添加always（經(jīng)我測(cè)試骤菠，只有Access-Control-Allow-Origin這個(gè)頭信息需要加always它改，其他的不加always也會(huì)攜帶回來(lái)），那我們加上試試

server {
        listen       22222;
        server_name  localhost;
        location  / {
            #新增加部分
           add_header Access-Control-Allow-Origin 'http://localhost:8080' always;
           proxy_pass  http://localhost:59200; 
        }
    }

修改了配置后娩怎，發(fā)現(xiàn)生效了搔课，當(dāng)然不是跨域就解決了，是上面這個(gè)問(wèn)題已經(jīng)解決了截亦，因?yàn)閳?bào)錯(cuò)內(nèi)容已經(jīng)變了

情況2：

通過(guò)報(bào)錯(cuò)信息提示可以得知爬泥，是跨域?yàn)g覽器默認(rèn)行為的預(yù)請(qǐng)求（option請(qǐng)求）沒(méi)有收到ok狀態(tài)碼，此時(shí)再修改配置文件崩瓤，當(dāng)請(qǐng)求為option請(qǐng)求時(shí)候袍啡，給瀏覽器返回一個(gè)狀態(tài)碼（一般是204）

server {
        listen       22222;
        server_name  localhost;
        location  / {
           add_header Access-Control-Allow-Origin 'http://localhost:8080' always;
           if ($request_method = 'OPTIONS') {
                return 204;
           }
           proxy_pass  http://localhost:59200; 
        }
    }

當(dāng)配置完后，發(fā)現(xiàn)報(bào)錯(cuò)信息變了

情況3：

意思就是預(yù)請(qǐng)求響應(yīng)頭Access-Control-Allow-Headers中缺少頭信息authorization（各種情況會(huì)不一樣却桶，在發(fā)生跨域后境输，在自定義添加的頭信息是不允許的蔗牡，需要添加到請(qǐng)求響應(yīng)頭Access-Control-Allow-Headers中，以便瀏覽器知道此頭信息的攜帶是服務(wù)器承認(rèn)合法的嗅剖，我這里攜帶的是authorization辩越，其他的可能是token之類(lèi)的，缺什么加什么）信粮，知道了問(wèn)題所在黔攒，然后修改配置文件，添加對(duì)應(yīng)缺少的部分强缘，再試試

server {
        listen       22222;
        server_name  localhost;
        location  / {
           add_header Access-Control-Allow-Origin 'http://localhost:8080' always;
           if ($request_method = 'OPTIONS') {
               add_header Access-Control-Allow-Headers 'authorization'; #為什么寫(xiě)在if里面而不是接著Access-Control-Allow-Origin往下寫(xiě)督惰？因?yàn)檫@里只有預(yù)檢請(qǐng)求才會(huì)檢查
               return 204; 
          } 
        proxy_pass http://localhost:59200; 
 }

此時(shí)發(fā)現(xiàn)報(bào)錯(cuò)問(wèn)題又回到了情況1

經(jīng)測(cè)試驗(yàn)證，只要if ($request_method = 'OPTIONS') 里面寫(xiě)了 add_header 旅掂，當(dāng)為預(yù)檢請(qǐng)求時(shí)外部配置的都會(huì)失效

官方文檔是這樣說(shuō)的：

There could be several add_header directives. 
These directives are inherited from the previous level if and only if there are no add_header directives defined on the current level.

意思就是當(dāng)前層級(jí)無(wú) add_header 指令時(shí)赏胚，則繼承上一層級(jí)的add_header。相反的若當(dāng)前層級(jí)有了add_header商虐，就應(yīng)該無(wú)法繼承上一層的add_header觉阅。

配置修改如下：

server {
        listen       22222;
        server_name  localhost;
        location  / {
            add_header Access-Control-Allow-Origin 'http://localhost:8080' always;
            if ($request_method = 'OPTIONS') {
                add_header Access-Control-Allow-Origin 'http://localhost:8080';
                add_header Access-Control-Allow-Headers 'authorization';
                return 204;
            }
            proxy_pass  http://localhost:59200; 
        }
    }

此時(shí)改完發(fā)現(xiàn)跨域問(wèn)題已經(jīng)解決了，

不過(guò)以上雖然解決了跨域問(wèn)題秘车，但是考慮后期可能Nginx版本更新,不知道這個(gè)規(guī)則會(huì)不會(huì)被修改留拾，考慮到這樣的寫(xiě)法可能會(huì)攜帶上兩個(gè) Access-Control-Allow-Origin ，這種情況也是不允許的鲫尊，下面會(huì)說(shuō)到。所以配置適當(dāng)修改如下：

server {
        listen       22222;
        server_name  localhost;
        location  / {
            if ($request_method = 'OPTIONS') {
                add_header Access-Control-Allow-Origin 'http://localhost:8080';
                add_header Access-Control-Allow-Headers 'authorization';
                return 204;
            }
            if ($request_method != 'OPTIONS') {
                add_header Access-Control-Allow-Origin 'http://localhost:8080' always;
            }
            proxy_pass  http://localhost:59200; 
        }
    }

情況4：

比較早期的API可能只用到了POST和GET請(qǐng)求沦偎，而Access-Control-Allow-Methods這個(gè)請(qǐng)求響應(yīng)頭跨域默認(rèn)只支持POST和GET疫向，當(dāng)出現(xiàn)其他請(qǐng)求類(lèi)型時(shí)候，同樣會(huì)出現(xiàn)跨域異常豪嚎。

比如搔驼，我這里將請(qǐng)求的API接口請(qǐng)求方式從原來(lái)的GET改成PUT，在發(fā)起一次試試侈询。在控制臺(tái)上會(huì)拋出錯(cuò)誤：

報(bào)錯(cuò)內(nèi)容也講的很清楚舌涨，在這個(gè)預(yù)請(qǐng)求中，PUT方法是不允許在跨域中使用的扔字，我們需要改下Access-Control-Allow-Methods的配置(缺什么加上么囊嘉，這里我只加了PUT，可以自己加全一點(diǎn))革为，讓瀏覽器知道服務(wù)端是允許的

server {
    listen 22222;
    server_name localhost;
    location / {
        if ($request_method = 'OPTIONS') {
            add_header Access-Control-Allow-Origin 'http://localhost:8080';
            add_header Access-Control-Allow-Headers 'content-type,authorization';
            add_header Access-Control-Allow-Methods 'PUT';#為這么只加在這個(gè)if中扭粱，不再下面的if也加上？因?yàn)檫@里只有預(yù)檢請(qǐng)求會(huì)校驗(yàn)震檩，當(dāng)然你加上也沒(méi)事琢蛤。
            return 204;
        }
        if ($request_method != 'OPTIONS') {
            add_header Access-Control-Allow-Origin 'http://localhost:8080' always;
        }
        proxy_pass http://localhost:59200;
    }
}

這里注意一下蜓堕，改成PUT類(lèi)型后，Access-Control-Allow-Headers請(qǐng)求響應(yīng)頭又會(huì)自動(dòng)校驗(yàn)content-type這個(gè)請(qǐng)求頭博其，和情況3是一樣的套才，缺啥補(bǔ)啥就行了。如果不加上content-type慕淡，則會(huì)報(bào)如下錯(cuò)誤背伴。（想簡(jiǎn)單的話，Access-Control-Allow-Headers和Access-Control-Allow-Methods可以設(shè)置為 * ,表示全都匹配儡率。但是Access-Control-Allow-Origin就不建議設(shè)置成 * 了挂据，為了安全考慮，限制域名是很有必要的儿普。）

都加上后崎逃，問(wèn)題就解決了，這里報(bào)405是我服務(wù)端這個(gè)接口只開(kāi)放了GET眉孩，沒(méi)有開(kāi)放PUT个绍，而此刻我將此接口用PUT方法去請(qǐng)求，所以接口會(huì)返回這個(gè)狀態(tài)碼浪汪。

情況5：

最后再說(shuō)一種情況巴柿，就是后端處理了跨域，就不需要自己在處理了（這里吐槽下死遭，某些后端工程師自己改服務(wù)端代碼解決跨域广恢，但是又不理解其中原理，網(wǎng)上隨便找段代碼黏貼呀潭，導(dǎo)致響應(yīng)信息可能處理不完全钉迷，如method沒(méi)添加全，headers沒(méi)加到點(diǎn)上钠署，自己用的那個(gè)可能復(fù)制過(guò)來(lái)的并不包含實(shí)際項(xiàng)目所用到的糠聪，沒(méi)有添加options請(qǐng)求返回狀態(tài)碼等，導(dǎo)致Nginx再用通用的配置就會(huì)可能報(bào)以下異常）

意思就是此刻Access-Control-Allow-Origin請(qǐng)求響應(yīng)頭返回了多個(gè)谐鼎，而只允許有一個(gè)舰蟆，這種情況當(dāng)然修改配置去掉Access-Control-Allow-Origin這個(gè)配置就可以了，不過(guò)遇到這種情況狸棍，建議Nginx配置和服務(wù)端自己解決跨域只選其一身害。（這里注意如果按我上面的寫(xiě)法，if $request_method = 'OPTIONS' 這個(gè)里面的Access-Control-Allow-Origin可不能刪除隔缀，刪除!='OPTIONS'里面的就好了题造，因?yàn)檫@里如果是預(yù)檢請(qǐng)求直接就ruturn了，請(qǐng)求不會(huì)再轉(zhuǎn)發(fā)到59200服務(wù)猾瘸，如果也刪除了界赔，就會(huì)報(bào)和情況1一樣的錯(cuò)誤丢习。所以為什么說(shuō)要不服務(wù)端代碼層面解決跨域，要不就Nginx代理解決淮悼，不要混著搞咐低，不然不明白原理的人，網(wǎng)上找一段代碼貼就很可能解決不了問(wèn)題）

server {
        listen       22222;
        server_name  localhost;
        location  / {
            if ($request_method = 'OPTIONS') {
                add_header Access-Control-Allow-Origin 'http://localhost:8080';
                add_header Access-Control-Allow-Headers '*';
                add_header Access-Control-Allow-Methods '*';
                add_header Access-Control-Allow-Credentials 'true';
                return 204;
            }
            if ($request_method != 'OPTIONS') {
                add_header Access-Control-Allow-Origin 'http://localhost:8080' always;
                add_header Access-Control-Allow-Credentials 'true';
            }
            proxy_pass  http://localhost:59200; 
        }
    }


server {
        listen       22222;
        server_name  localhost;
        location  / {
            add_header Access-Control-Allow-Origin 'http://localhost:8080' always;
            add_header Access-Control-Allow-Headers '*';
            add_header Access-Control-Allow-Methods '*';
            add_header Access-Control-Allow-Credentials 'true';
            if ($request_method = 'OPTIONS') {
                return 204;
            }
            proxy_pass  http://localhost:59200; 
        }
    }