在某些 chrome 版本中沒有“Access-Control-Allow-Origin”header

Question

我正在嘗試通過我的客戶端將一些圖像上傳到 cloudinary，它在 localhost 和 chrome 版本 87 中運行良好，但在 chrome v89 中我得到 No 'Access-Control-Allow-Origin' header 錯誤，任何關於為什么會這樣的想法發生？

這是我的服務器路由：

const uploader = require('../config/cloudinary.config')

router.post('/upload', uploader.single("imageUrl"), (req, res) => {
    res.setHeader('Access-Control-Allow-Origin', 'client domain');
    if (!req.file) {
        res.status(500).json({ code: 500, message: 'Error loading the file' })
        return;
    }

    res.json({ secure_url: req.file.path })
})

這是我的 cors 配置：

const cors = require('cors')

const whitelist = [process.env.DOMAIN]

const corsOptions = {

    origin: (origin, cb) => {
        const originIsWhitelisted = whitelist.includes(origin)
        cb(null, originIsWhitelisted)
    },
    credentials: true
}

Answer 1

您可能需要處理CORS 預檢請求，您的瀏覽器在 POST 請求之前將其顯示為 OPTION 請求。

將此行添加到您的代碼中。

router.options('/upload', cors())