2 回答

TA貢獻1818條經(jīng)驗 獲得超11個贊
您的客戶端不知道您在服務(wù)器上設(shè)置的代理中間件。它不能自動將原始 URL 替換為代理的 URL。你必須自己做。
更改客戶端 JS,使其向/3.0/lists
.

TA貢獻1943條經(jīng)驗 獲得超7個贊
當(dāng)前端應(yīng)用程序從不同來源(localhost vs us19.api.mailchim.com)向資源發(fā)出請求時,瀏覽器會發(fā)出飛行前請求以檢查服務(wù)器是否允許從不同來源調(diào)用其入口點。如果是這種情況,它應(yīng)該使用 Access-Control-Allow-Origin 標(biāo)頭回復(fù)預(yù)檢請求。
API 可以非常寬松并允許任何來源:
Access-Control-Allow-Origin: *
或者服務(wù)器可以將一些來源列入白名單并根據(jù)來源發(fā)送特定的標(biāo)頭。例如:
Access-Control-Allow-Origin: localhost:3000
如果響應(yīng)中沒有這樣的標(biāo)頭,則瀏覽器不會因您提到的錯誤而阻止請求。
在您的情況下,us19.api.mailchimp.com/3.0/lists 似乎不允許 CORS 調(diào)用。因此,您有 2 個解決方案。
如果您可以控制服務(wù)器,則可以通過將標(biāo)頭放在響應(yīng)中來實現(xiàn)一些 CORS 支持
或者您的前端可以調(diào)用您的后端(沒有 CORS,因為來源是相同的 localhost:3000),然后后端將充當(dāng)代理并調(diào)用 us19.api.mailchimp.com
根據(jù)您的代碼片段,您實際上已經(jīng)在選擇第二個選項,其中您的后端是 us19.api.mailchimp.com 的代理。但是,要使其正常工作,前端應(yīng)以 /3.0/lists 為目標(biāo)(因此不會進行 CORS 檢查,因為您的前端和服務(wù)器都位于 localhost:3000 上),然后您的后端會將請求轉(zhuǎn)發(fā)到 us19.api.mailchimp.com。
注意:由于我從未使用過 http-proxy-middleware,因此我假設(shè)您的設(shè)置中沒有與 express 和 http-proxy-middleware 相關(guān)的問題。但這也可能是一個額外的檢查點。
編輯
似乎對 us19.api.mailchimp.com 的前端調(diào)用是由 @mailchimp/mailchimp_marketing 完成的,因為這樣的目標(biāo) /3.0/lists 不是一個選項。同樣在進一步閱讀之后,無法使用 mailchimp API 配置 CORS。
所以解決方案是在服務(wù)器端移動 @mailchimp/mailchimp_marketing 的使用,而不是在客戶端使用它。
添加回答
舉報