【原】fetch跨域請求附帶cookie（credentials）

時間 2019-11-10

標籤 fetch 請求附帶 cookie credentials 欄目 HTML 简体版

原文原文鏈接

HTTP訪問控制 https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORSjavascript

解決跨域的方式有不少種，本文介紹「跨域請求附帶發送cookie」php

1、測試環境

前提：後臺使用apache+php實現。apache設置多個虛擬主機，設置方式參考：http://www.cnblogs.com/sivkun/p/7347978.htmlhtml

在http://a.sivkun.com域中/cors-cookie/目錄下有文件：java

1. index.phpapache

<?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.htmljson

<!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/目錄下有文件：api

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（修正後的代碼）cookie

<?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);
?>

接下來是一步步的解決過程，不想看能夠不看。

2、開啓附帶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);
?>