has been blocked by CORS policy跨域問題解決

zmxyzmxy1234發表於2022-08-24
BloCCORS跨域

title: has been blocked by CORS policy跨域問題解決

我們在前端呼叫介面時，瀏覽器有時候會報錯：

XXXX form XXXX Xhas been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is XXXX

這時候就是因為CORS保護問題阻止了我們的訪問

一、什麼是跨域

出於瀏覽器的同源策略限制。同源策略（Sameoriginpolicy）是一種約定，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，則瀏覽器的正常功能可能都會受到影響。可以說Web是構建在同源策略基礎之上的，瀏覽器只是針對同源策略的一種實現。同源策略會阻止一個域的。javascript指令碼和另外一個域的內容進行互動。所謂同源（即指在同一個域）就是兩個頁面具有相同的協議（protocol），主機（host）和埠號（port)。

當一個請求url的協議、域名、埠三者之間任意一個與當前頁面url不同即為跨域。

二、如何解決

返回header頭Access-Control-Allow-Origin

我們需要服務端返回


access-control-allow-origin: 你的URL

Access-Control-Allow-Origin是HTML5中定義的一種解決資源跨域的策略。

這裡的URL為你的訪問端，可以設定*作為萬用字元，即所有域名都可以訪問


Access-Control-Allow-Origin: *

Nginx配置跨域

  1. 直接全域性配置，在server{}裡直接新增一行

    
add_header access-control-allow-origin *;

  2. 為指定URL配置

    
location /api {

    add_header access-control-allow-origin *;

    if ($request_method = 'OPTIONS') {

            return 204;

    }

}

  3. 為某種資源配置

    
 location  ~ .*\.(jpg|avi|png)?$

    {

        add_header access-control-allow-origin *;

        if ($request_method = 'options') {

          return 204;

        }

    }

Apache配置跨域

在 httpd-vhosts.conf 新增


<VirtualHost *:80>

    DocumentRoot /data/www/test

    ServerName test.com

Header set Access-Control-Allow-Origin *

Header set Access-Control-Allow-Credentials true

Header set Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept"

    <Directory />

        Options FollowSymLinks ExecCGI Indexes

        AllowOverride All

        Order allow,deny

        Allow from all

    </Directory>

</VirtualHost>

PHP配置跨域

在入口檔案加入一行


header("Access-Control-Allow-Origin: *");
本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章