節點后端Vue（Vite）前端，Axios請求CORS錯誤

Question

賞金將在 5 天后到期。 此問題的答案有資格獲得+50聲望賞金。 Jacky.S正在從有信譽的來源尋找答案。

我知道這個問題在 Stackoverflow 上已經討論了很多，但不幸的是我找不到讓它工作的方法。 長話短說，我正在使用 Node JS 構建一個 API 來向 MailChimp 發出請求，我在客戶端 Vue JS 應用程序上使用 Vite 調用這個 API。 The API works fine with Postman, but it returns Access to XMLHttpRequest at from origin has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource錯誤。

這是服務器上的索引js文件：

const cors = require('cors')
app.use(cors({ origin: '*' }))
app.use('/v1/crm/leads', require('./src/routes/LeadRoutes'))

這是我的 controller 方法

await addSubscriberToAudience('xxx', req.body.email).then(async (mailchimpID) => {
  if (mailchimpID) {
    let data = {
      references: {
        mailchimpID: mailchimpID
      }
    }
    let updatedLead = await Lead.findByIdAndUpdate(lead.id, data, { new: true })
    res.status(200).json({ data: updatedLead, message: 'New Lead Created Successfully' })
  } else {
    console.log('Null Mailchimp ID')
  }
})

這是我從前端調用它的方式：

axios.post(APIURL + '/v1/crm/leads/create', data, {
        headers: { 'X-ORIGIN': 'https://example.com' }
      }).then((response) => {
        console.log(response)
      }).catch((error) => {
        console.log(error.message)
      })

我可以看到在預檢響應中的響應 header 中設置了訪問允許來源：

后端托管在 AWS Elastic Beanstalk 上，前端托管在 AWS S3 Bucket 上 請需要任何幫助，謝謝！

編輯 1：我正在從網站向我的后端服務器進行其他 POST API 調用，它們都工作正常。 只有這個不起作用，不同的是，在我從客戶端調用服務器后，服務器調用 Mailchimp API，然后等待 Mailchimp API 的響應，然后將成功響應返回給我的前端，希望這個上下文幫助

Answer 1

你用的是哪個瀏覽器？ 顯然在 Chrome 上，通配符 * 與本地主機 url 不匹配。 stackoverflow上有一個關於這個的ppost：

為什么我的 http://localhost CORS 原點不起作用？

這是關於 chrome 的文檔：

鉻文檔

Answer 2

如果您完全確定此 CORS 錯誤僅發生在單個 POST 端點上（其他 POST 工作）； 那么這通常是由端點 Controller 中的一個簡單錯誤引起的。

我認為發生的是app.use(responseMiddleware)實際上將responseMiddleware添加到了成功的響應中，但不適用於失敗的響應（例如500秒）。

我相信 Chrome 在撒謊，並且 CORS header 實際上是在OPTION響應中找到的，但在實際的POST響應中卻沒有。