Expressjs如何僅在一條路線上啟用CORS？

Question

下面的代碼不起作用

app.post('/blah', (req, res) => {
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Methods', 'GET, PUT, POST, DELETE, HEAD');
    res.status(204).send();
});

請注意，我不想為整個應用程序打開CORS。

Answer 1

將其發布為答案，因為原來是問題所在（根據我之前的評論）。 根據您提出的確切CORS請求，瀏覽器可能會決定需要對請求進行預檢。 如果是這樣，那么您還需要在匹配的OPTIONS請求中設置自定義標頭。

許多事情可以觸發預檢，例如自定義標題，正在使用的某些動詞，某些身份驗證機制等。

這些文章中介紹了哪些類型的請求觸發預檢：

使用CORS

跨源資源共享

基本上，這是任何未定義為“簡單請求”的請求，其中簡單請求僅使用GET，HEAD和POST，並且僅使用少量的自定義標頭。 任何其他內容，甚至某些標頭的某些值，都會觸發預檢請求，其中瀏覽器在發送實際URL之前向相同的URL請求預檢授權發送OPTIONS請求。

Answer 2

您可以使用這樣的東西：

var express = require('express')
var cors = require('cors')
var  corsOptions = { origin: 'http://yourapp.com'}
var app = express()

app.get('/products/:id', cors(corsOptions), function (req, res, next) {
  res.json({msg: 'This is CORS-enabled for a Single Route'})
})

app.listen(8080, function () {
  console.log('CORS-enabled web server listening on port 8080')
})

默認情況下，只有6個響應標頭通過CORS公開：

1. 緩存控制
2. 內容語言
3. 內容類型
4. 過期
5. 上一次更改
6. 語用

如果要公開其他標頭，則可以使用暴露的標頭選項：

 corsOptions = {
  exposedHeaders: ['Content-Length', 'X-Foo', 'X-Bar'],
}

請參閱此以獲取有關CORS的更多詳細信息：

關於cors的更多細節

Answer 3

您正在使用哪個版本的Express？ API的v4在res上公開了set()方法，您可以在其中定義標頭。 如果傳遞多個標頭，則傳遞一個對象。 嘗試這樣的事情：

res.set({
  'Access-Control-Allow-Origin': '*',
  'Access-Control-Allow-Methods': 'GET, PUT, POST, DELETE, HEAD'
});

文件資料 。

Answer 4

基於Clark Jung的回復，您可以使用https://github.com/expressjs/cors#enable-cors-for-a-single-route

var express = require('express')
var cors = require('cors')
var app = express()

app.get('/products/:id', cors(), function (req, res, next) {
  res.json({msg: 'This is CORS-enabled for a Single Route'})
})

app.listen(80, function () {
  console.log('CORS-enabled web server listening on port 80')
})

Answer 5

為什么不使用https://github.com/expressjs/cors 。 您可以像這樣使用。

var express = require('express')
var cors = require('cors')
var app = express()

app.use(cors())

app.get('/products/:id', function (req, res, next) {
  res.json({msg: 'This is CORS-enabled for all origins!'})
})

app.listen(80, function () {
  console.log('CORS-enabled web server listening on port 80')
})

或參考這里https://enable-cors.org/server_expressjs.html

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

app.get('/', function(req, res, next) {
  // Handle the get for this route
});

app.post('/', function(req, res, next) {
 // Handle the post for this route
});