CORS跨域操作cookie

Posted 2020-12-12 peaky

CORS 跨域

• 在服务端设置响应头 ACAO（ Access-Control-Allow-Origin ）即可

前端代码，运行在 8080 端口上

$.ajax({
    url:‘http://localhost:3000/cors‘
})
.done( res =>{
    console.log(res);
});

服务端代码，服务器在 3000 端口上

const http = require(‘http‘);
http.createServer((req, res) => {
    res.writeHead(200, {
        ‘Content-Type‘: ‘text/plain; charset=utf-8‘,
        ‘Access-Control-Allow-Origin‘: ‘http://localhost:8080‘
    });
    if (req.url === ‘/cors‘) {
        res.end(‘ok‘);
    }
}).listen(3000);

获取请求头的 cookie

• 注意点有三个
  1. 发送ajax请求时，设置参数 xhrFields:{ withCredentials: true }
  2. 服务端设置响应头 ‘Access-Control-Allow-Credentials‘: true
  3. 服务端响应头 ‘Access-Control-Allow-Origin‘ 不可设置为 ‘*‘

前端代码

document.cookie = ‘a=1112‘
$.ajax({
    url:‘http://localhost:3000/cors‘,
    xhrFields:{
        withCredentials: true
    }
})
.done( res =>{
    console.log(res);
})

服务端代码

const http = require(‘http‘);
http.createServer((req, res) => {
    res.writeHead(200, {
        ‘Content-Type‘: ‘text/plain; charset=utf-8‘,
        ‘Access-Control-Allow-Origin‘: ‘http://localhost:8080‘,
        ‘Access-Control-Allow-Credentials‘: true
    })
    if (req.url === ‘/cors‘) {
        console.log(req.headers.cookie);      //此时可在此处获取页面的 cookie
        res.end(‘ok‘)
    }
}).listen(3000);