如何修復(fù)：err_response_headers_multiple_access_control_allow_olaly_origin錯(cuò)誤在Google Chrome中

要修復(fù)Google Chrome中的“ ERR_RESPONDE_HEADERS_MULTIPLIPY_ACCESS_CONTROL_ALLOD_ORIGIN”錯(cuò)誤，您需要解決在服務(wù)器響應(yīng)中發(fā)送的多個(gè)訪問(wèn)控制的問(wèn)題。這是您可以?huà)?cǎi)取的步驟：

1. 確定標(biāo)頭的來(lái)源：使用瀏覽器開(kāi)發(fā)人員工具檢查響應(yīng)標(biāo)頭。打開(kāi)Chrome，導(dǎo)航到有問(wèn)題的頁(yè)面，然後按F12打開(kāi)開(kāi)發(fā)人員工具。轉(zhuǎn)到Network選項(xiàng)卡，重新加載頁(yè)面，然後單擊相關(guān)請(qǐng)求以查看響應(yīng)標(biāo)頭。查找多個(gè)Access-Control-Allow-Origin標(biāo)頭。

2. 修改服務(wù)器配置：根據(jù)您的服務(wù)器，您需要確保在響應(yīng)中發(fā)送只有一個(gè)Access-Control-Allow-Origin標(biāo)頭。如果您使用的是反向代理或CDN，請(qǐng)檢查其配置。

   • Apache ：修改您的.htaccess或服務(wù)器配置文件以包含適當(dāng)?shù)?code>Header set指令。

      <code class="apache"><ifmodule mod_headers.c> Header set Access-Control-Allow-Origin "https://example.com" </ifmodule></code>

   • NGINX ：調(diào)整NGINX配置中的服務(wù)器塊。

      <code class="nginx">add_header 'Access-Control-Allow-Origin' 'https://example.com' always;</code>

3. 通配符使用：如果您需要允許多個(gè)起源，請(qǐng)考慮使用通配符，但要注意安全含義。例如：

    <code class="apache">Header set Access-Control-Allow-Origin "*"</code>

   或在nginx中：

    <code class="nginx">add_header 'Access-Control-Allow-Origin' '*' always;</code>

4. 動(dòng)態(tài)原點(diǎn)處理：如果需要?jiǎng)討B(tài)設(shè)置原點(diǎn)，則可能需要服務(wù)器端邏輯來(lái)回應(yīng)響應(yīng)中的Origin標(biāo)頭，如果它匹配允許的起源的白名單。
5. 清除瀏覽器緩存：進(jìn)行更改後，清除瀏覽器緩存並再次測(cè)試網(wǎng)站。

err_response_headers_multiple_access_control_allow_origin錯(cuò)誤在Google Chrome中的常見(jiàn)原因是什麼？

“ err_response_headers_multiple_access_control_allow_origin”錯(cuò)誤通常是由於以下原因而發(fā)生的：

1. 多個(gè)標(biāo)頭：最常見(jiàn)的原因是服務(wù)器在響應(yīng)中發(fā)送多個(gè)Access-Control-Allow-Origin標(biāo)頭。這可能是由於服務(wù)器設(shè)置的不同部分之間的配置或衝突（例如，應(yīng)用服務(wù)器，反向代理，CDN）而發(fā)生的。
2. 服務(wù)器錯(cuò)誤配置：不正確的服務(wù)器配置，例如在服務(wù)器堆棧的不同部分中多次設(shè)置標(biāo)頭，可能會(huì)導(dǎo)致此錯(cuò)誤。這可以在Apache，Nginx或其他服務(wù)器軟件配置中。
3. 中間件衝突：如果您在應(yīng)用程序堆棧中使用了多個(gè)中間件組件或框架，則它們可能會(huì)無(wú)意間多次設(shè)置Access-Control-Allow-Origin標(biāo)頭。
4. CDN或代理問(wèn)題：如果您使用的是CDN或代理，它們也可能會(huì)修改或添加標(biāo)頭，可能會(huì)導(dǎo)致最終響應(yīng)中多個(gè)Access-Control-Allow-Origin標(biāo)頭。
5. 動(dòng)態(tài)標(biāo)頭設(shè)置：如果服務(wù)器基於請(qǐng)求的Origin標(biāo)頭動(dòng)態(tài)設(shè)置Access-Control-Allow-Origin標(biāo)題，則如果未正確實(shí)現(xiàn)邏輯，則可能發(fā)生錯(cuò)誤。

如何調(diào)整服務(wù)器配置以解決err_response_headers_multiple_access_control_allow_origin錯(cuò)誤？

要解決“ err_response_headers_multiple_access_control_allow_origin”錯(cuò)誤，您需要確保服務(wù)器僅發(fā)送一個(gè)Access-Control-Allow-Origin標(biāo)頭。這是調(diào)整服務(wù)器配置的方法：

1. Apache ：

   • 編輯您的.htaccess或服務(wù)器配置文件，以確保僅設(shè)置一個(gè)Access-Control-Allow-Origin孔。

      <code class="apache"><ifmodule mod_headers.c> Header set Access-Control-Allow-Origin "https://example.com" </ifmodule></code>

   • 如果您有多個(gè)Header指令設(shè)置Access-Control-Allow-Origin ，請(qǐng)將它們合併為一個(gè)。

2. nginx ：

   • 編輯您的NGINX配置文件以正確設(shè)置標(biāo)頭。

      <code class="nginx">add_header 'Access-Control-Allow-Origin' 'https://example.com' always;</code>

   • 確保沒(méi)有矛盾的add_header指令。

3. 其他服務(wù)器：

   • 對(duì)於其他服務(wù)器軟件，請(qǐng)檢查文檔，以找出如何設(shè)置HTTP標(biāo)頭，並確保僅設(shè)置一個(gè)Access-Control-Allow-Origin標(biāo)頭。

4. 應(yīng)用程序邏輯：

   • 如果應(yīng)用程序邏輯會(huì)動(dòng)態(tài)設(shè)置Access-Control-Allow-Origin標(biāo)頭，請(qǐng)確保正確設(shè)置它，僅設(shè)置一次。這可能涉及修改中間件或應(yīng)用程序代碼。

5. CDN和代理：

   • 如果使用CDN或代理，請(qǐng)檢查其設(shè)置，並確保他們不會(huì)添加其他Access-Control-Allow-Origin標(biāo)頭。您可能需要調(diào)整其配置或禁用標(biāo)頭修改功能。

是否有任何瀏覽器擴(kuò)展可能有助於解決ERR_RESPONSE_HEADERS_MULTIPLIPY_ACCESS_CONTROL_ALLOD_OLALADER_ORIGIN錯(cuò)誤的故障排除？

是的，有幾個(gè)瀏覽器擴(kuò)展程序可以幫助您對(duì)“ err_response_headers_multiple_access_control_olaly_origin”“ err_response_headers_multiple_origin_origin”錯(cuò)誤進(jìn)行故障排除。GoogleChrome中的錯(cuò)誤：

1. Cors Unblock ：

   • 此擴(kuò)展可以幫助您暫時(shí)繞過(guò)CORS錯(cuò)誤以診斷問(wèn)題。它可用於測(cè)試目的，但不應(yīng)用於生產(chǎn)中。

2. 修改標(biāo)頭：

   • 此擴(kuò)展程序使您可以直接從瀏覽器中修改請(qǐng)求和響應(yīng)標(biāo)頭。您可以使用它手動(dòng)調(diào)整Access-Control-Allow-Origin標(biāo)頭並測(cè)試不同的配置。

3. 請(qǐng)求：

   • 該擴(kuò)展名提供了用於修改請(qǐng)求和響應(yīng)的高級(jí)工具，可以幫助您模擬不同的服務(wù)器配置以識(shí)別錯(cuò)誤的根本原因。

4. HTTP標(biāo)題直播：

   • 該擴(kuò)展程序可以實(shí)時(shí)顯示並幫助您分析HTTP標(biāo)頭，從而更容易識(shí)別多個(gè)Access-Control-Allow-Origin標(biāo)頭。

5. 郵遞員：

   • 雖然主要用於API測(cè)試，但Postman可用於發(fā)送請(qǐng)求並檢查標(biāo)頭，這可以幫助您了解服務(wù)器對(duì)請(qǐng)求的響應(yīng)方式。

使用這些擴(kuò)展名，您可以操縱標(biāo)頭，分析服務(wù)器響應(yīng)並識(shí)別可能導(dǎo)致錯(cuò)誤的錯(cuò)誤配置。

以上是如何修復(fù)：err_response_headers_multiple_access_control_allow_olaly_origin錯(cuò)誤在Google Chrome中的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！