私はバックエンドでexpress jを使用していて、フロントエンドでフェッチしています。私のフロントエンドは、ポート3000でローカルに実行されているwebpack-dev-severによってホストされています。エクスプレスjsサーバーはポート3001でローカルに実行されています。ノード・サーバーは、カスタム・ヘッダーを使用して、コル・モードでPOST要求に何も応答しません。
私のエクスプレスjsサーバーは、端末にログオンするために 'morgan'を使用しています。私のサーバーのコードは次のようになります。
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);
})
:
体
[0] {customField1: 'Y'、
クロムデバッガツールのネットワークタブはこれです
[0] imei: '358967064854480'、
[0] isMercha ntExist: 'Y'、
[0] mobileNo: '9999999999'
[0]のserialNumber 'ZY22285JKV'}
ヘッダー:
[0] {ホスト:「ローカルホスト:3001' 、
[0]接続: 'キープアライブ'、
[0] 'のContent-Length': '119'、
[0] ' - IMEIをX' '358967064854480'
[0]起源: 'http://localhost:3000'
[0] requestid: '9999999999300513303519185'
[0]「のContent '0' 'user-agent': 'Mozilla/5.0(Linux;'); ':' application/json '、
Android 6.0; Nexus 5のビルド/ MRA58N)のAppleWebKit/537.36(ヤモリ様KHTML)クローム/ 58.0.3029.110モバイルサファリ/ 537.36'
[0] 'とx-API-キー': 'l7xx5a9a4eea46054ef38b18b5e6fdbd2c5a'
[ 0]受け入れる: '/'
[0]リファラー: 'http://localhost:3000/auth/verifyNo'
[0] 'エンコーディングを受け入れる': 'GZIP、収縮、BR'、
[0 ] 'accept-language': 'en-IN、en-GB; q = 0.8、en-US; q = 0.6、en; q = 0である。4' }
morgainログ:
[0] POST/CR/V2 /商人/検証/識別子200 2.432ミリ - すべてこの後23
、私はエラーを取得しておらず、また、午前バックエンドからの応答データがありません。
面白いことに、私のレストクライアント(郵便配達員)がうまく動作します。私は郵便配達員に関するデータを取得します。