【原】fetch跨域請求附帶cookie（credentials）
HTTP訪問控制 https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS
解決跨域的方式有很多種，本文介紹“跨域請求附帶發送cookie”
一、測試環境
前提：後臺使用apache+php實現。apache設置多個虛擬主機，設置方式參考：http://www.cnblogs.com/sivkun/p/7347978.html
在http://a.sivkun.com域中/cors-cookie/目錄下有文件：
1. index.php
<?php session_start(); setcookie(‘a.a‘,‘a.a‘); setcookie(‘a.sivkun‘,‘a.sivkun‘,time()+3600*24,‘/‘,"a.sivkun.com"); include_once ‘index.html‘; ?>
2. index.html
<!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"></head> <body> <script> fetch(‘http://b.sivkun.com/cors-cookie/api.php‘, { credentials: "include" //表示發送請求附帶域b.sivkun.com下cookie }).then(function (response) { console.log(response); return response.json(); }).then(function (data) { console.log(‘cookie‘,data) }) </script> </body> </html>
在http://b.sivkun.com域中/cors-cookie/目錄下有文件：
1. api.php(有問題的代碼)
<?php session_start();setcookie("bbbbb","bbbbb"); setcookie(‘b.sivkun‘,‘b.sivkun‘,time()+3600*24,‘/‘,"b.sivkun.com"); echo json_encode($_COOKIE); ?>
正確的方式
1. api.php（修正後的代碼）
<?php session_start(); header("Access-Control-Allow-Origin:http://a.sivkun.com"); header("Access-Control-Allow-Credentials: true"); setcookie("bbbbb","bbbbb"); setcookie(‘b.sivkun‘,‘b.sivkun‘,time()+3600*24,‘/‘,"b.sivkun.com"); echo json_encode($_COOKIE); ?>
接下來是一步步的解決過程，不想看可以不看。
二、開啟附帶cookie跨域
上面的代碼運行是有問題的
報錯：
1.這裏要求http://b.sivkun.com/cors-cookie/api.php.設置header。
index.php:1 Fetch API cannot load http://b.sivkun.com/cors-cookie/api.php.
No ‘Access-Control-Allow-Origin‘ header is present on the requested resource.
Origin ‘http://a.sivkun.com‘ is therefore not allowed access.
If an opaque response serves your needs, set the request‘s mode to ‘no-cors‘ to fetch the resource with CORS disabled.
修改：api.php，添加`Access-Control-Allow-Origin:*`頭，允許所有跨域請求
<?php session_start(); header("Access-Control-Allow-Origin:*"); setcookie("bbbbb","bbbbb"); setcookie(‘b.sivkun‘,‘b.sivkun‘,time()+3600*24,‘/‘,"b.sivkun.com"); echo json_encode($_COOKIE); ?>
2.這裏提示如果請求使用“include”證書模式，需要把`*`改為http://a.sivkun.com。
Fetch API cannot load http://b.sivkun.com/cors-cookie/api.php.
The value of the ‘Access-Control-Allow-Origin‘ header in the response must not be the wildcard ‘*‘ when the request‘s credentials mode is ‘include‘.
Origin ‘http://a.sivkun.com‘ is therefore not allowed access.
修改：api.php
<?php session_start(); header("Access-Control-Allow-Origin:http://a.sivkun.com"); setcookie("bbbbb","bbbbb"); setcookie(‘b.sivkun‘,‘b.sivkun‘,time()+3600*24,‘/‘,"b.sivkun.com"); echo json_encode($_COOKIE); ?>
3.接下來報錯，說要添加`Access-Control-Allow-Credentials`頭部，加上唄
Fetch API cannot load http://b.sivkun.com/cors-cookie/api.php.
The value of the ‘Access-Control-Allow-Credentials‘ header in the response is ‘‘ which must be ‘true‘ when the request‘s credentials mode is ‘include‘.
Origin ‘http://a.sivkun.com‘ is therefore not allowed access.
api.php
<?php session_start(); header("Access-Control-Allow-Origin:http://a.sivkun.com"); header("Access-Control-Allow-Credentials: true"); setcookie("bbbbb","bbbbb"); setcookie(‘b.sivkun‘,‘b.sivkun‘,time()+3600*24,‘/‘,"b.sivkun.com"); echo json_encode($_COOKIE); ?>
控制太輸出：說明cookie是發過去了的。
最後看一下應用的cookie信息：Cookies選項中，在`a.sivkun.com`中可以看到包括`b.sivkun.com`所有的cookie信息。
接下來在控制臺操作一下cookie，發現只有a.sivkun.com這個域中設置的cookie，說明瀏覽器限制javascript是不可以跨域操作cookie的。如下圖：
【原】fetch跨域請求附帶cookie（credentials）