2017-06-30 3 views
1

私はバックエンドで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); 
}) 

すべての輸入、構文などが適切です。サーバの端末にログイン network request details

[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

、私はエラーを取得しておらず、また、午前バックエンドからの応答データがありません。

面白いことに、私のレストクライアント(郵便配達員)がうまく動作します。私は郵便配達員に関するデータを取得します。

答えて

0

これはトリッキーなものです。これは、optionsリクエストです。これは、ブラウザからのプリフライトリクエストです。 options要求は2つのhttpヘッダーAccess-Control-Request-Headers' andアクセス制御メソッド `を含んでいます。 しかし、corsオプションのすべてのメソッドを許可しているようです。

あなたは次のように事前飛行要求を有効にすることができ

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

関連する問題