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

  }


  • 2018-08-02 15:03:28

    正则提取字段

    如下文案,如何提取中间的文案呢 eq: 我们的%%aaa%%不一致,哈哈哈 提取后是aaa

  • 2018-08-07 20:00:42

    xUtils3.0版本的发送同步网络请求的方式

    对于Android开发来说,基本都是用异步来从网络上请求数据,很少用到同步请求的。近日项目有个地方需要使用到同步请求(以我目前的知识储备来说好像只能用同步请求来解决这个问题了),去网上搜索相关资料,又没有找到什么明确的使用方法。所以记下来,以备不时之需。

  • 2018-08-14 23:35:28

    Retrofit 设置 超时时间

    今天开发的时候遇到一个网络请求超时的问题,后台处理是成功的,但是移动端返回的总是提示请求超时,在设置了retrofit请求超时的时间延长以后,就可以请求成功了,下面是配置的方法:

  • 2018-08-16 16:10:43

    Laravel 跨域解决方案

    我们在用 laravel 进行开发的时候,特别是前后端完全分离的时候,由于前端项目运行在自己机器的指定端口(也可能是其他人的机器) , 例如 localhost:8000 , 而 laravel 程序又运行在另一个端口,这样就跨域了,而由于浏览器的同源策略,跨域请求是非法的。其实这个问题很好解决,只需要添加一个中间件就可以了。

  • 2018-08-18 20:30:12

    laravel5.5 路由分割成不同文件

    routes.php/api.php文件用来放置laravel路由,当项目越来越大,相应的路由文件也会越来越多。如果能够将不同功能的路由分割到不同的文件,那么对以后的维护将很有帮助。