美文网首页【前端技术】专题
【web前端】withCredentials有什么作用

【web前端】withCredentials有什么作用

作者: 林哥学前端 | 来源:发表于2020-01-09 15:04 被阅读0次

1.withCredentials是什么?

credential

withCredentials是XMLHttpRequest的一个属性,表示跨域请求是否提供凭据信息(cookie、HTTP认证及客户端SSL证明等)

实际中用途就是跨域请求是要不要携带cookie

2.在需要跨域携带cookie时,要把withCredentials设置为true,比如

var xhr = new XMLHttpRequest()
xhr.withCredentials = true
xhr.open('GET', 'http://localhost:8888/', true)
xhr.send(null)

3.服务端的设置

只有客户端设置当然不够了,服务端还需要设置两点

1)跨域

既然是跨域请求,服务端要设置Access-Control-Allow-Origin,告诉浏览器允许跨域,而且这个值必须指定域名,不能设置为*
比如你页面所在的域名为http://www.abc.com,服务端的Access-Control-Allow-Origin,必须是http://www.abc.com

2)Access-Control-Allow-Credentials

在响应头中,Access-Control-Allow-Credentials这个值也要设置为true,根据mdn上的说法,只有设置为true的时候,浏览器才会把响应结果暴露给你的js代码

最后看一下服务端的代码,我简单用koa2写了一个

const koa = require('koa2')

const app = new koa()

app.use(async ctx => {
  ctx.set('Access-Control-Allow-Origin', 'http://127.0.0.1:5500')  // 此处为html页面的地址
  ctx.set('Access-Control-Allow-Credentials', true)
  const username = ctx.cookies.get('username')
  if (username) {
    ctx.body = username
  } else {
    ctx.body = 'no cookie'
  }
})

app.listen(8888)

相关文章

网友评论

    本文标题:【web前端】withCredentials有什么作用

    本文链接:https://www.haomeiwen.com/subject/mpmyactx.html