javascript fetch 跨域请求时 session失效问题

Posted 2020-09-03 没离开过

javascript 使用fetch进行跨域请求时默认是不带cookie的，所以会造成 session失效。

fetch(url, {
    method: ‘POST‘,
    credentials: ‘include‘,
    headers: {
      ‘Content-Type‘: ‘application/x-www-form-urlencoded‘,
    },
    body: JSON.stringify({
      data: options.data
    })
  })

credentials: ‘include‘ 可以是fetch 带上cookie。但是问题了来。
原来在服务器端设置header （php 服务器）

    header("Access-Control-Allow-Origin: *");

会报错：

A wildcard ‘*‘ cannot be used in the ‘Access-Control-Allow-Origin‘ header when the credentials flag is true. Origin ‘http://localhost:8000‘ is therefore not allowed access.

可以看到不允许 使用‘*’ 号了，那么就改成 访问域名（这里是本地调用所以是 http://localhost:8000）

header("Access-Control-Allow-Origin: http://localhost:8000");

改完后再次发送请求，还是报错

Credentials flag is ‘true‘, but the ‘Access-Control-Allow-Credentials‘ header is ‘‘. It must be ‘true‘ to allow credentials. Origin ‘http://localhost:8000‘ is therefore not allowed access.

说‘Access-Control-Allow-Credentials 头必须是true，那么继续增加

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

增加完后可以正常访问了，而且session也有了。

 

ps: fetch 有个mode 是no-cors ,发现设置后返回的status是0，查资料后

no-cors mode is only to CDN content, such as scripts, CSS and image, you cannot be used for getting data，response.status = 0 is right behavior

no-cors 模式只能用来获取CDN内容，比如脚本，css文件和图片，如果用来获取数据比如json格式就会返回status=0