Express 和 Node：CORS 失敗

Question

我有一個為我的 Angular 2 前端編寫的 Express 和 Node 后端 API。

當服務器的入口文件中未正確設置 CORS 時，我收到此常見錯誤：

XMLHttpRequest 無法加載https://keilcarpenter-portfolioapi.herokuapp.com/api/sendemail 。 對預檢請求的響應未通過訪問控制檢查：請求的資源上不存在“Access-Control-Allow-Origin”標頭。 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 請求，據我了解，如果請求不是 GET、POST 或 HEAD 請求（在此HTTP 訪問控制文檔中得到確認），則該請求僅被預檢

我很肯定我已經根據enable-cors.org正確設置了我的 CORS 標頭

// 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

由於headers.append('Content-Type', 'application/json')請求被預檢

該錯誤意味着我正在傳遞一個預檢請求，但它只是一個 POST 請求，據我了解，如果請求不是 GET、POST 或 HEAD 請求（在此HTTP 訪問控制文檔中得到確認），則該請求僅被預檢

請參閱相同文檔的部分內容：

如果 Content-Type 標頭具有以下值以外的值：

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

並且您需要確保您的 express 代碼以正確的方式處理OPTIONS請求。 如需這方面的幫助，請參閱帶有 Express.js 和 Angular2 的 CORS的答案，或者按照上面的評論中的建議，只需使用https://www.npmjs.com/package/cors ，它會為您處理所有這些內容。