Node-Server reagiert nicht auf POST-Anfrage im Cors-Modus mit benutzerdefinierten Headern

Question

Ich benutze Express-Js im Back-End und tun holen im Frontend. Mein Frontend wird von webpack-dev-sever gehostet, der lokal auf Port 3000 läuft. Mein express js Server läuft lokal auf Port 3001. Ich muss einige benutzerdefinierte Header mit meiner Anfrage senden.

Mein Express-Js-Server verwendet "Morgan" für die Anmeldung am Terminal. Der Code von meinem Server sieht wie folgt aus:

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}`) 
}) 

Mein Frontend-Code ist dies:

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

Alle Importe, Syntax usw. korrekt sind.

Das Chrom-Register Netzwerk des Debuggers Werkzeugs ist dies:

Die Protokolle in Anschluss des Servers:

Körper

[0] {CustomField1: 'Y',

[0] imei: '358967064854480',

[0] isMercha ntExist: 'Y',

[0] mobileNo: '9999999999',

[0] Seriennummer: 'ZY22285JKV'}

headers:

[0] {host: ‚localhost : 3001' ,

[0] Verbindung: 'keep-alive',

[0] 'content-length': '119',

[0] 'x-IMEI': '358967064854480'

[0] Herkunft: 'http://localhost:3000',

[0] RequestID: '9999999999300513303519185',

[0] ‚content- type ':' application/json ',

[0]' Benutzeragent ':' Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537,36 (KHTML, wie Gecko) Chrom/58.0.3029.110 Mobile Safari/537,36' ,

[0] 'x-api-key': 'l7xx5a9a4eea46054ef38b18b5e6fdbd2c5a',

[ 0] annehmen: '/'

[0] referer: 'http://localhost:3000/auth/verifyNo'

[0] 'accept-encoding': 'gzip, abzulassen, br',

[0 ] 'Akzeptieren-Sprache': 'en-IN, en-GB; q = 0.8, de-DE; q = 0.6, en; q = 0.4' }

Morgain log:

[0] POST/cr/v2/Händler/verify/Kennung 200 2,432 ms - 23

Nach all dem, erhalte ich keinen Fehler und auch keine Antwortdaten vom Backend

Lustige Sache ist, dass mein Rest-Client (Postman) gut funktioniert. Ich bekomme Daten über den Postboten.

Answer 1

Dies ist eine schwierige Frage. Es ist eine options Anfrage, das ist eine Preflight-Anfrage vom Browser. Die Anfrage options enthält zwei HTTP-Header Access-Control-Request-Headers' and Access-Control-Methode. Aber es sieht so aus, als ob Sie jede Methode in cors Optionen zulassen.

können Sie vor Flug-Anfragen aktivieren wie

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