前端跨域withCredentials设置为true, 请求头携带cookie信息-吴惟刚

前端跨域withCredentials设置为true, 请求头携带cookie信息

会会发表于 JS 分类，标签: 前端跨域 withCredentials

18 04月 2022

描述

withCredentials

在同一域名下使用withCredentials属性是无效的
默认值是false
跨域请求需要登录认证的请求，需要携带权限信息比如cookie, JWT鉴权(authorization headers), 配置withCredentials属性为true

案例

使用node起一个本地的服务http://localhost:3000

运行命令(server是创建的这个js的名称)
1
node server.js

或者直接在webstorm中直接运行

1 2	1. 打开这个server.js ===》右键 ===》 Run 'Server.js' 2. 再或者输入命令Ctrl+Shift+F10

js代码如下


const http = require('http');

const hostname = '127.0.0.1';
const port = 3000;

const server = http.createServer((request, respones) => {
    respones.statusCode = 200;
    respones.setHeader('Content-Type', 'text/plan');
    respones.end('Hello World\n');
});

server.listen(port, hostname, () => {
    console.log(`Server running at http://${hostname}:${port}`)
});

新建一个index.html,通过webstorm打开这个index.html文件，然后在浏览器中运行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>前端跨域withCredentials使用</title>
</head>
<body>
<h1>如果前端跨域请求要想带上cookie,必须给请求设置withCredentials为true,这样请求头就会带上cookie</h1>
<script>
    var xhr = new XMLHttpRequest();
 xhr.open('GET', 'http://localhost:3000', true);
 // xhr.withCredentials = true;
 xhr.send(null);
</script>
</body>
</html>