ajax、fetch 跨域携带cookie

原生ajax请求方式：

jquery的post方法请求：

服务器端设置：

前后端分离，用nginx做请求跨域处理。用了fetch来替代ajax，访问正常，但是请求时没带cookie，就加了credentials: "include"

在后台配置

1、问题原因：cookie的作用域是domain本身以及domain下的所有子域名。

后端PHP用 setcookie 来设置网站的cookie，该函数的用法如下：

它的第五个参数$domain决定了cookie的作用域。作用域的限制使得setCookie失败

2、解决办法

前端电脑绑定host

webpack代理设置如下

开发时，浏览器访问 http://dev.bb.aa.ke.com:6666/

解决ajax发送请求无法设置cookie问题

前端jquery

let url = 'http://www.baidu.com'

let url1 = 'http://www.baidu.com'

let username = 'abc'

let password = 'abc'

$.ajax({

          url: url,

          type: 'post',

          data: {

            mobile: username,

            mobilepwd: password,

          },

          xhrFields: {

            withCredentials: true

          },

          dataType: 'json',

          success: function (res) {

            console.log(res)

            if (res.status == 1) {

              window.location.href = url

            }

          }

        })

前端vue

var $this = this

let url = 'http://www.baidu.com'

let data = {

    mobile:123,

    mobilepwd:123,

}

$this.$axios.defaults.withCredentials = true

$this.$axios.post(url,data)

  .then((res) =>{

    console.log(res.data)

  })

php后台设置

header('Access-Control-Allow-Origin:'.$_SERVER['HTTP_ORIGIN'])

header("Access-Control-Allow-Credentials: true")

解释两个header的作用

我们在客户端设置了withCredentials=true 参数，对应着，服务器端要通过在响应 header 中设置Access-Control-Allow-Credentials = true来运行客户端携带证书式的访问。通过对Credentials参数的设置，就可以保持跨域Ajax时传递的Cookie。

发送ajax请求，我们发现还会出现一个错误，提示我们Access-Control-Allow-Origin不能用*通配符。原因是：当服务器端Access-Control-Allow-Credentials = true时，参数Access-Control-Allow-Origin的值不能为'*'。

我们重新设置Access-Control-Allow-Origin的值，当服务器端接收到请求后，在返回响应时，把请求的域Origin填写到响应的Header信息里（即谁访问我，我允许谁）

---