CORS跨域问题以及跨域之后Set-Cookie无法设置Cookie问题

文章目录


服务端-express

express
使用cors
const cors = require('cors')

app.use(cors())

从库的源代码中,我们可以看出使用的是res.setHeader方法。

自己写一个中间件
module.exports = () => (req, res, next) => {
  const ref = req.headers.origin;
  res.header('Access-Control-Allow-Origin', ref);
  res.header('Access-Control-Allow-Credentials', true);
  res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With');
  res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
  next();
}

// app.js 中
const myCors = require("........cors");
app.use(myCors());

node_moduls中,打开express文件夹下lib文件夹,查看response.js,可以发现

  1. express 的 res 原来是继承自ServerResponse
    var res = Object.create(http.ServerResponse.prototype)
    
  2. express 的 res 的 set 和 header 方法 都是使用了 原生的
    setHeader方法
    res.set =
    res.header = function (...) {
    	...
    	this.setHeader(field, value);
    }
    

由此可见,设置header的基本方法,还是ServerResponse.setHeader
setHeaders方法在nodejshttp库中,可以找到。
放个nodejs官网链接:nodejs-http

跨域Set-Cookie无效
  1. xhr
xhr.withCredentials = true;
  1. fetch
fetch(url, {
method: '',
headers: {},
...
credentials: 'include'
})

设置了credential那么也需要在服务端做出配置。
首先,Access-Control-Allow-Origin不能设置为通配符*
其次,Access-Control-Allow-Credentials需要设置为true
这样我们开发者工具控制台输入document.cookie,就可以看到开发者工具的网络请求里面responseset-cookie内容出现在了cookie中。

上一篇:js中间件


下一篇:记录一次solr自定义函数编写及使用的过程