Question

我在后端使用express js并在前端执行fetch。我的前端由webpack-dev-sever托管，它在端口3000上本地运行。我的快速js服务器在端口3001上本地运行。我需要发送一些自定义标头以及我的请求。

我的快递服务器正在使用＆＃39; morgan＆＃39;登录终端。我的服务器的代码如下所示：

const express = require('express')
const bodyParser = require('body-parser')
const morgan = require('morgan')
const fs = require('fs')
const path = require('path')
const mime = require('mime')
const http = require('http')
const cors = require('cors')

const server = express();

let whitelist = [
    'http://localhost:3000',
];
var corsOptions = {
    origin: function(origin, callback){
        var originIsWhitelisted = whitelist.indexOf(origin) !== -1;
        callback(null, originIsWhitelisted);
    },
    credentials: true
};
server.use(cors(corsOptions));
server.use(bodyParser());
server.use(morgan('dev'));
server.use(function (req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Content-Type, x-imei, X-API-Key, requestId, Authorization');
  res.header('Access-Control-Allow-Methods', '*');
  next()
})

server.post('/verify/identifier', function(req, res, next) {
  console.log(req.body)
  console.log(req.headers)
  res.send({"responseCode":"0012"});
});

server.listen(port, function() {
  console.log(`server hosted on port ${port}`)
})

我的前端代码是：

export function fetchMerchantApi(url, body) {
  let reqObj = {
    method: 'POST',
    headers: {
      "Content-Type": "application/json",
      "X-API-Key": secret_key,
      "requestId": getUniqueId()
    },
    cache: 'default',
    mode: 'cors'
  }
  try {
    return new Promise((res, rej) => {
      fetch(url, reqObj).then(result => {
        return result.json()
      }).then(data => {
        res(data)
      });
    })
  } catch(e) {
    throw new Error(e);
  }
}

fetchMerchantApi("http://localhost:3001/verify/identifier", reqBody).then(res => {
console.log(res);
})

所有导入，语法等都是正确的。

Chrome调试工具的网络标签是这样的：

服务器终端中的日志：

体

[0] {customField1：＆＃39; Y＆＃39;，

[0] imei：＆＃39; 358967064854480＆＃39;，

[0] isMerchantExist：＆＃39; Y＆＃39;，

[0] mobileNo：＆＃39; 9999999999＆＃39;，

[0] serialNumber：＆＃39; ZY22285JKV＆＃39; }

标题

[0] {host：＆＃39; localhost：3001＆＃39;，

[0]连接：＆＃39; keep-alive＆＃39;，

[0]＆＃39;内容长度＆＃39;：＆＃39; 119＆＃39;，

[0]＆＃39; x-imei＆＃39;：＆＃39; 358967064854480＆＃39;，

[0]来源：＆＃39; http://localhost:3000＆＃39;，

[0] requeststid：＆＃39; 9999999999300513303519185＆＃39;，

[0]＆＃39;内容类型＆＃39;：＆＃39; application / json＆＃39;，

[0]＆＃39;用户代理＆＃39;：＆＃39; Mozilla / 5.0（Linux; Android   6.0; Nexus 5 Build / MRA58N）AppleWebKit / 537.36（KHTML，与Gecko一样）Chrome / 58.0.3029.110 Mobile Safari / 537.36＆＃39;，

[0]＆＃39; x-api-key＆＃39;：＆＃39; l7xx5a9a4eea46054ef38b18b5e6fdbd2c5a＆＃39;，

[0]接受：＆＃39; / ＆＃39;，

[0] referer：＆＃39; http://localhost:3000/auth/verifyNo＆＃39;，

[0]＆＃39;接受编码＆＃39;：＆＃39; gzip，deflate，br＆＃39;，

[0]＆＃39;接受语言＆＃39;＆＃39; en-IN，en-GB; q = 0.8，en-US; q = 0.6，en; q = 0.4＆＃39; }

morgain log：

[0] POST / cr / v2 / merchant / verify / identifier 200 2.432 ms - 23

毕竟，我没有收到任何错误，也没有来自后端的响应数据。

有趣的是，我的休息客户端（Postman）工作正常。我得到邮递员的数据。

Answer 1

这是一个棘手的问题。这是options请求，是来自浏览器的预检请求。 options请求包含两个http标头Access-Control-Request-Headers' and Access-Control-Method`。但看起来你在cors选项中允许使用每种方法。

您可以启用预班航班请求，例如

app.options('*', cors())

节点服务器在具有自定义标头的cors模式下没有响应任何POST请求

1 个答案: