エクスプレス＆ノード：CORSが失敗する

Question

私は、エクスプレスとノードのバックエンドAPIをAngular 2フロントエンド用に作成しました。

CORSがサーバーのエントリファイルで正しく設定されていないとき、私は、この一般的なエラーが発生します。

のXMLHttpRequestがhttps://keilcarpenter-portfolioapi.herokuapp.com/api/sendemailをロードすることはできません。プリフライト要求への応答がアクセス制御チェックを通過しない：要求されたリソースに「アクセス制御許可」がない。 Origin 'http://keilcarpenter.co.nz'はアクセスできません。応答はここ

.. HTTPステータスコード503を持っていたクライアントからのHTTP POSTリクエストです：

sendEmail(queryObject: any) { 
    const body = JSON.stringify(queryObject); 
    const headers = new Headers(); 
    headers.append('Content-Type', 'application/json'); 
    return this.http.post('https://keilcarpenter-portfolioapi.herokuapp.com/api/sendemail', body, {headers: headers}) 
    .map((response: Response) => response.json()); 
} 

エラーは、私がプリフライトリクエストが、その唯一のPOSTリクエストを渡してからだということを意味します私の理解リクエストが唯一のプリフライトされ、それはこのHTTP Access Control documentation

で確認されてGET、POSTあるいはHEADリクエスト以外であれば、私は私が私のCORSを設定しているポジティブだがenable-cors.org

に応じて適切にヘッダの

// Get dependencies 
var express = require('express'); 
var path = require('path'); 
var http = require('http'); 
var bodyParser = require('body-parser'); 
// Get our API routes 
var api = require('./server/routes/api'); 
var app = express(); 
// Parsers for POST data 
app.use(bodyParser.json()); 
app.use(bodyParser.urlencoded({ extended: false })); 
// Point static path to dist 
app.use(express.static(path.join(__dirname, 'dist'))); 
app.use(function (req, res, next) { 
    res.header("Access-Control-Allow-Origin", "*"); 
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); 
    next(); 
}); 
// Set our api routes 
app.use('/api', api); 
// Catch all other routes and return the index file 
app.get('*', function (req, res) { 
    res.sendFile(path.join(__dirname, 'dist/index.html')); 
}); 
/** 
* Get port from environment and store in Express. 
*/ 
var port = process.env.PORT || '3000'; 
app.set('port', port); 
/** 
* Create HTTP segggrver. 
*/ 
var server = http.createServer(app); 
/** 
* Listen on provided port, on all network interfaces. 
*/ 
server.listen(port, function() { return console.log("API running on localhost:" + port); }); 
//# sourceMappingURL=server 

質問

• はなぜエラーは、それがPOSTの場合にリクエストがプリフライトされていることを言っていますか？
• CORSヘッダーが受け入れられないのはなぜですか？

Answer 1

要求はエラーが私はプリフライトリクエストが、その唯一のPOSTリクエストを渡していますし、それが他のであれば私の理解からの要求のみがプリフライトされていることを意味するため、headers.append('Content-Type', 'application/json')

にプリフライトます

：この HTTP Access Control documentation

これを言い、同じドキュメントの一部を参照してくださいに確認されているGET、POSTあるいはHEADリクエストより3210

Content-Typeヘッダには、次の以外の値を持っている場合：

• application/x-www-form-urlencoded
• multipart/form-data
• text/plain

そして、あなたはあなたの特急コードのハンドルを確認する必要があります適切な方法でOPTIONSリクエストを送信してください。そのためには、CORS with Express.js and Angular2の回答を参照するか、上記のコメントに示唆されているように、https://www.npmjs.com/package/corsを使用してください。