Request header field access-token is not allowed by Access-Control-Allow-Headers in preflight res...

google查了一下,这个错误的根本原因是因为OPTIONS请求的CORS预检不成功导致。

当您开始使用自定义请求标头时,您将获得CORS预检。这是一个使用·HTTP OPTIONS·方式并包含多个属性的请求,其中一个标题是列出客户端要包含在请求中的CORS头的Access-Control-Request-Headers

您需要使用适当的CORS头回复该CORS预检,才能使其正常工作。其中一个是Access-Control-Allow-Headers。该属性需要包含Access-Control-Request-Headers属性包含的相同值(或更多)。

请求1.png
请求2.png

解决方法:在express的拦截器添加

      res.header("Access-Control-Allow-Origin", "*");
      res.header("Access-Control-Allow-Methods", "GET,PUT,POST,DELETE,OPTIONS");
      res.header("Access-Control-Allow-Headers", "Content-Type,access-token");  // 修改了这段
      res.header("Access-Control-Allow-Credentials", "true");
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1.浏览器的同源安全策略 浏览器只允许请求当前域的资源,而对其他域的资源表示不信任。 那怎么才算跨域呢? 请求协议...
    赵客缦胡缨v吴钩霜雪明阅读 6,117评论 1 10
  • CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)。 ...
    myccy8阅读 3,126评论 0 2
  • 什么是跨域HTTP请求 现代浏览器出于安全的考虑,使用 XMLHttpRequest对象发起 HTTP请求时必须遵...
    孤独的人最善良阅读 4,871评论 0 0
  • 一、简介 CORS需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能,IE浏览器不能低于IE10。 整个CO...
    mongofeng阅读 1,930评论 0 0
  • 前沿: 最近总听到同事聊跨域得问题,于是自己抽空仔细的查阅了一下关于跨域的知识。说到跨域,就得提到同源,跨域是指一...
    戈弋图阅读 5,785评论 0 4