No Access-Control-Allow-Origin 跨域錯誤解決

什麼是跨域訪問

在A網站中，咱們但願使用Ajax來得到B網站中的特定內容。若是A網站與B網站不在同一個域中，那麼就出現了跨域訪問問題。你能夠理解爲兩個域名之間不能跨過域名來發送請求或者請求數據，不然就是不安全的。跨域訪問違反了同源策略，
同源策略規定，瀏覽器的ajax只能訪問跟它的HTML頁面同源（相同域名或IP）的資源。

跨域

如何肯定是跨域請求

• A域名資源請求到B/C……域名

• 你當前訪問的域名是http的當請求的部分資源是https的

• 當使用ajax訪問遠程服務器時，請求失敗，瀏覽器報如上錯誤。這是出於安全的考慮，默認禁止跨域訪問致使的。
  

若是是跨域訪問，這時候就會報錯

has been blocked by CORS policy: No 'Access-Control-Allow-Origin'

錯誤場景如：個人WordPress報錯：Fonts –No 'Access-Control-Allow-Origin'，已經提示我字體文件請求http url跨域了，而後根據我用的服務環境設置以下就行：

跨域訪問解決

Apache

<IfModule mod_headers.c>

<FilesMatch "\.(svg|ttf|otf|eot|woff|woff2)$">

    Header set Access-Control-Allow-Origin "*"

</FilesMatch>

</IfModule>

Nginx

location ~* \.(eot|ttf|woff)$ {

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

}

Access-Control-Allow-Origin:* 表示容許任何域名跨域訪問。

擴展

server {

  listen        80;

  server_name   uedbox.com;

 

 

  location / {

 

    # Simple requests

    if ($request_method ~* "(GET|POST)") {

      add_header "Access-Control-Allow-Origin"  *;

    }

 

    # Preflighted requests

    if ($request_method = OPTIONS ) {

      add_header "Access-Control-Allow-Origin"  *;

      add_header "Access-Control-Allow-Methods" "GET, POST, OPTIONS, HEAD";

      add_header "Access-Control-Allow-Headers" "Authorization, Origin, X-Requested-With, Content-Type, Accept";

      return 200;

    }

 

    ....

    # Handle request

    ....

  }

你還能夠動態配置跨域方案

et $cors '';

if ($http_origin ~ '^https?://(localhost|www\.yourdomain\.com|www\.yourotherdomain\.com)') {

        set $cors 'true';

}

 

if ($cors = 'true') {

        add_header 'Access-Control-Allow-Origin' "$http_origin" always;

        add_header 'Access-Control-Allow-Credentials' 'true' always;

        add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always;

        add_header 'Access-Control-Allow-Headers' 'Accept,Authorization,Cache-Control,Content-Type,DNT,If-Modified-Since,Keep-Alive,Origin,User-Agent,X-Requested-With' always;

        # required to be able to read Authorization header in frontend

        #add_header 'Access-Control-Expose-Headers' 'Authorization' always;

}

 

if ($request_method = 'OPTIONS') {

        # 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;

}

不改動服務配置跨域解決

<?php $ret = array(     'name' => isset($_POST['name'])? $_POST['name'] : '',     'gender' => isset($_POST['gender'])? $_POST['gender'] : '' ); header('content-type:application:json;charset=utf8'); header('Access-Control-Allow-Origin:*'); header('Access-Control-Allow-Methods:POST'); header('Access-Control-Allow-Headers:x-requested-with,content-type'); echo json_encode($ret); ?>

若是須要指定某域名才容許跨域訪問，只需把Access-Control-Allow-Origin:*改成Access-Control-Allow-Origin:容許的域名，例如：

header('Access-Control-Allow-Origin:https://www.uedbox.com');

若是須要設置多個域名容許訪問，那麼把多個域名放在數組中就能夠，例如：

<?php

$ret = array(

    'name' => isset($_POST['name'])? $_POST['name'] : '',

    'gender' => isset($_POST['gender'])? $_POST['gender'] : ''

);

header('content-type:application:json;charset=utf8');

$origin = isset($_SERVER['HTTP_ORIGIN'])? $_SERVER['HTTP_ORIGIN'] : '';

$allow_origin = array(

    'https://www.uedbox.com',

    'https://www.uedbox.com'

);

if(in_array($origin, $allow_origin)){

    header('Access-Control-Allow-Origin:'.$origin);

    header('Access-Control-Allow-Methods:POST');

    header('Access-Control-Allow-Headers:x-requested-with,content-type');

}

echo json_encode($ret);

?>

至此，No 'Access-Control-Allow-Origin'問題解決！

擴展

Nginx的跨域Content Security Policy通行設置