跨域問題服務端解決辦法 Request header field Authorization is not allowed by Access-Control-Allow-Headers

tp5--修改全局跨域

 

在“項目目錄/public/index.php“文件
在代碼前面加上:

// 跨域
header("Access-Control-Allow-Origin:*");
header("Access-Control-Allow-Methods:GET, POST, OPTIONS, DELETE");
header("Access-Control-Allow-Headers:DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type, Accept-Language, Origin, Accept-Encoding");

header('Access-Control-Max-Age:72000');

// 否允許發送Cookie header('Access-Control-Allow-Credentials:true'); // 響應頭設置 header("Access-Control-Allow-Headers: X-Requested-With, Content-Type, Accept, Apikey");

 

tp5--修改單接口跨域

在方法里
在方法內前面加上:

// 跨域
header("Access-Control-Allow-Origin:*");
header("Access-Control-Allow-Methods:GET, POST, OPTIONS, DELETE");
header("Access-Control-Allow-Headers:DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type, Accept-Language, Origin, Accept-Encoding");

header('Access-Control-Max-Age:72000');

// 否允許發送Cookie header('Access-Control-Allow-Credentials:true'); // 響應頭設置 header("Access-Control-Allow-Headers: X-Requested-With, Content-Type, Accept, Apikey");

 

 

注意：前端請求發送兩次的情況 

原因：

XMLHttpRequest會遵守同源策略(same-origin policy). 也即腳本只能訪問相同協議/相同主機名/相同端口的資源, 如果要突破這個限制, 那就是所謂的跨域, 此時需要遵守CORS(Cross-Origin Resource Sharing)機制。

那么, 允許跨域, 不就是服務端設置Access-Control-Allow-Origin: *就可以了嗎? 普通的請求才是這樣子的, 除此之外, 還一種叫請求叫preflighted request。

preflighted request在發送真正的請求前, 會先發送一個方法為OPTIONS的預請求(preflight request), 用於試探服務端是否能接受真正的請求，如果options獲得的回應是拒絕性質的，比如404\403\500等http狀態，就會停止post、put等請求的發出。

那么, 什么情況下請求會變成preflighted request呢? 

1、請求方法不是GET/HEAD/POST
2、POST請求的Content-Type並非application/x-www-form-urlencoded, multipart/form-data, 或text/plain
3、請求設置了自定義的header字段
上面請求中設置了自定義的headers字段，出現了option請求。把自定義headers字段刪掉后，只訪問一次

如何解決

【HTTP】如何避免OPTIONS請求？
非簡單請求 會在正式通信之前，增加一次HTTP請求，稱之為預檢請求。瀏覽器會先發起OPTIONS方法到服務器，以獲知服務器是否允許該實際請求。
后端在請求的返回頭部添加：
 
Access-Control-Max-Age：（number）  。數值代表preflight request  （預檢請求）的返回結果（即 Access-Control-Allow-Methods 和Access-Control-Allow-Headers 提供的信息） 可以被緩存多久，單位是秒。
 
例如：將預檢請求的結果緩存10分鍾：
 
Access-Control-Max-Age: 600 
 
不同瀏覽器有不同的上限。在Firefox中，上限是24h（即86400秒），而在Chromium 中則是10min（即600秒）。Chromium 同時規定了一個默認值 5 秒。
如果值為 -1，則表示禁用緩存，每一次請求都需要提供預檢請求，即用OPTIONS請求進行檢測。
 
Access-Control-Max-Age方法對完全一樣的url的緩存設置生效，多一個參數也視為不同url。也就是說，如果設置了10分鍾的緩存，在10分鍾內，所有請求第一次會產生options請求，第二次以及第二次以后就只發送真正的請求了。

 

 

 

跨域問題服務端解決辦法

一般在入口文件加

header('Access-Control-Allow-Origin:*');
// 響應類型
header('Access-Control-Allow-Methods:*');
// 響應頭設置
header('Access-Control-Allow-Headers:content-type,token,id');
header("Access-Control-Request-Headers: Origin, X-Requested-With, content-Type, Accept, Authorization");

// 否允許發送Cookie header('Access-Control-Allow-Credentials:true'); // 響應頭設置 header("Access-Control-Allow-Headers: X-Requested-With, Content-Type, Accept, Apikey");

都能解決，要是不行試試下面

if($_SERVER['REQUEST_METHOD'] == 'OPTIONS'){
    header("Access-Control-Allow-Origin: *");
    header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Authorization");
    header('Access-Control-Allow-Methods: GET, POST, PUT,DELETE,OPTIONS,PATCH');
    file_put_contents('option.txt',json_encode($_REQUEST));
    exit;
}

header('Access-Control-Allow-Origin:*');
// 響應類型
header('Access-Control-Allow-Methods:*');
// 響應頭設置
header('Access-Control-Allow-Headers:content-type,token,id');
header("Access-Control-Request-Headers: Origin, X-Requested-With, content-Type, Accept, Authorization");

// 否允許發送Cookie header('Access-Control-Allow-Credentials:true'); // 響應頭設置 header("Access-Control-Allow-Headers: X-Requested-With, Content-Type, Accept, Apikey");