CORS跨域操作cookie

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);