由於“Access-Control-Allow-Origin”，無法從 React 應用程序的 docker 容器中獲取 API

Question

我在 docker 容器內運行 azure 函數 API，我可以毫無問題地從 postman 或 chrome 訪問它，但我無法從 React 應用程序訪問它。 我得到一個錯誤：

from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

如果我在本地而不是在容器中運行 API，我可以使用local.settings.json ：

"Host": {
        "LocalHttpPort": 7071,
        "CORS": "*",
        "CORSCredentials": false
    }

如果我在雲中托管 API，我可以在其中配置 CORS，但是在 docker 容器中運行它時呢？

我一直在閱讀不同的帖子試圖弄清楚這個問題，但我仍然找不到答案，或者我能理解的答案：/有沒有我可以修改的東西，比如local.settings.json或類似的東西？ 還是我需要修改Dockerfile或其他什么？

Answer 1

CORS 是一種瀏覽器保護，需要額外的 header 才能解決。 這是一個在 api 和瀏覽器之間工作的協議，因此 docker 不能做任何事情所以你可以改變或者改變你的 api 來發送下面解釋的正確標題。

CORS 在 Docker 引擎 REST Api - DevOps Stack Exchange

在這里，我們將直接發送 Access-Control-Allow-Origin header 並將其值設置為“*”，這將告訴瀏覽器使用同源資源。

另一種方法是使用 nginx 作為 docker 的代理，如下所述。 此處代理將更改 header。此處您不必更改您的 api。

用 Docker 解決本地開發的 CORS 問題 | 通過 Maximillian Xavier | 中等的