亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

創建 React 應用程序:setupProxy 不斷返回被 CORS 策略阻止的 401

創建 React 應用程序:setupProxy 不斷返回被 CORS 策略阻止的 401

當年話下 2023-04-27 16:48:10
這是我的 setupProxy 代碼:const { createProxyMiddleware } = require("http-proxy-middleware");function proxy(app) {  app.use(    "/3.0/lists",    createProxyMiddleware({      target: "https://us19.api.mailchimp.com",      changeOrigin: true,    })  ); ...}我的發帖請求取決于用戶輸入。例如:https://us19.api.mailchimp.com/3.0/lists/123/members/432/tags 但我不斷收到此錯誤:Access to XMLHttpRequest at來自“http://localhost:3000”的“https://us19.api.mailchimp.com/3.0/lists/7667u7/members/23er23ewe233/tags”已被 CORS 策略阻止:對預檢請求的響應不通過訪問控制檢查:請求的資源上不存在“Access-Control-Allow-Origin”標頭。但我已經在 setupProxy 中有了它?
查看完整描述

2 回答

?
慕尼黑8549860

TA貢獻1818條經驗 獲得超11個贊

您的客戶端不知道您在服務器上設置的代理中間件。它不能自動將原始 URL 替換為代理的 URL。你必須自己做。

更改客戶端 JS,使其向/3.0/lists.


查看完整回答
反對 回復 2023-04-27
?
楊__羊羊

TA貢獻1943條經驗 獲得超7個贊

當前端應用程序從不同來源(localhost vs us19.api.mailchim.com)向資源發出請求時,瀏覽器會發出飛行前請求以檢查服務器是否允許從不同來源調用其入口點。如果是這種情況,它應該使用 Access-Control-Allow-Origin 標頭回復預檢請求。

API 可以非常寬松并允許任何來源:

Access-Control-Allow-Origin: *

或者服務器可以將一些來源列入白名單并根據來源發送特定的標頭。例如:

Access-Control-Allow-Origin: localhost:3000

如果響應中沒有這樣的標頭,則瀏覽器不會因您提到的錯誤而阻止請求。

在您的情況下,us19.api.mailchimp.com/3.0/lists 似乎不允許 CORS 調用。因此,您有 2 個解決方案。

  1. 如果您可以控制服務器,則可以通過將標頭放在響應中來實現一些 CORS 支持

  2. 或者您的前端可以調用您的后端(沒有 CORS,因為來源是相同的 localhost:3000),然后后端將充當代理并調用 us19.api.mailchimp.com

根據您的代碼片段,您實際上已經在選擇第二個選項,其中您的后端是 us19.api.mailchimp.com 的代理。但是,要使其正常工作,前端應以 /3.0/lists 為目標(因此不會進行 CORS 檢查,因為您的前端和服務器都位于 localhost:3000 上),然后您的后端會將請求轉發到 us19.api.mailchimp.com。

注意:由于我從未使用過 http-proxy-middleware,因此我假設您的設置中沒有與 express 和 http-proxy-middleware 相關的問題。但這也可能是一個額外的檢查點。

編輯

似乎對 us19.api.mailchimp.com 的前端調用是由 @mailchimp/mailchimp_marketing 完成的,因為這樣的目標 /3.0/lists 不是一個選項。同樣在進一步閱讀之后,無法使用 mailchimp API 配置 CORS。

所以解決方案是在服務器端移動 @mailchimp/mailchimp_marketing 的使用,而不是在客戶端使用它。


查看完整回答
反對 回復 2023-04-27
  • 2 回答
  • 0 關注
  • 240 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號