nodejs express中设置请求头允许跨域,自定义了请求头,就会多发送一次options请求

2020-04-12 17:33:26

有一种请求叫做Preflighted Request(带预检的跨域请求)。

Preflighted Request 在发送真正的请求前,会先发送一个方法为 OPTIONS 的 预请求(Preflighted Request), 用于试探服务端是否能接受真正的请求。 如果options获得的回应时拒绝性质的,如404、403、500等状态,就会停止post、get请求的发出。 所以,options成功后才会进行get post请求


nodejs express中设置请求头允许跨域

设置请求头允许跨域请求

app.js 文件中添加 代码


var app = express();


app.all('*', function (req, res, next) {

  // 设置请求头为允许跨域

  res.header('Access-Control-Allow-Origin', '*');

  // 设置服务器支持的所有头信息字段

  res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild, sessionToken');

  // 设置服务器支持的所有跨域请求的方法

  res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');

  if (req.method.toLowerCase() == 'options') {

      res.send(200);  // 让options尝试请求快速结束

  } else {

      next();

  }

});


自定义了一个请求头 sessionToken ,加入到 Access-Control-Allow-Headers中即可。


由于自定义了请求头,就会多发送一次options请求,

就会在控制台中看到一个接口被请求了2次,如下图:



为什么会发送OPTIONS请求?

有一种请求叫做Preflighted Request(带预检的跨域请求)。

Preflighted Request 在发送真正的请求前,会先发送一个方法为 OPTIONS 的 预请求(Preflighted Request), 用于试探服务端是否能接受真正的请求。 如果options获得的回应时拒绝性质的,如404、403、500等状态,就会停止post、get请求的发出。 所以,options成功后才会进行get post请求


跨域分为 简单跨域请求和复杂跨域请求

简单跨域 请求是不会发送options请求的

复杂跨域 请求会发送一个预检请求options

复杂跨域请求要满足以下:


请求方法不是GET/HEAD/POST

POST请求的Content-Type并非application/x-www-form-urlencoded, multipart/form-data, 或text/plain

请求设置了自定义的header字段

所以我们在请求头下面加入以下代码,能够尽快处理请求头为 options的请求。


if (req.method.toLowerCase() == 'options') {

      res.send(200);  // 让options尝试请求快速结束

  } else {

      next();

  }


  • 2020-03-11 09:45:19

    45个优秀的vue开源项目

    在过去一年里,前端开发发展迅速,前端工程师的薪资亦是水涨船高。2019 更是热度不减,而作为近年来尤为热门的前端框架,Vue.js 自是积累了大量关注。本文将为你介绍 2019 年最值得关注的 45 个 Vue.js 开源项目——Let's go!

  • 2020-03-11 18:26:52

    Mac设置ADB

    adb在 ~/Library/Android/sdk/platform-tools文件夹内

  • 2020-03-11 19:40:56

    java.util.zip.ZipException: zip file is empty

    三、总结 出现 java.util.zip.ZipException: zip file is empty错误,表示你本地使用的jar包或者aar包可能为空,你可以检查下文件大小,如果为空,可以替换本地的jar包或者aar包为正常的jar包或者aar包,或者如果官方有相关的资源的话直接使用官方的依赖资源即可。

  • 2020-03-11 21:22:36

    Vue的组件化之notification组件/Vue.extend()

    一、把组件的内部结构写好,写成一个vue文件notification.vue。 二、全局设置组件属性。//如果后面不需要直接引入组件的方式调用,可以不用全局注册 index.js中一般写的是需要全局设置的属性。

  • 2020-03-13 19:58:19

    推荐Android两种屏幕适配方案

    在Android开发中,由于Android碎片化严重,屏幕分辨率千奇百怪,而想要在各种分辨率的设备上显示基本一致的效果,适配成本越来越高。虽然Android官方提供了dp单位来适配,但其在各种奇怪分辨率下表现却不尽如人意,因此下面探索一种简单且低侵入的适配方式。本文将推荐两种屏幕适配方案,大家可以根据实际情况使用。

  • 2020-03-14 16:35:00

    nuxt.js部署全过程(ubuntu+nginx+node+pm2)

    系统的话本篇是Ubuntu 16.04.6 ,centos也行,大同小异都是Linux。不过如果你是初学者,最好和我使用一样的,因为因为发行版本不同而导致的差异可能导致运行某些东西失败,找问题要找好久。windows server不推荐了,企业用的多,小服务器跑windows server比较费劲。