Azure Container Apps跨源资源共享(CORS)问题

huangapple go评论59阅读模式
英文:

Azure Container Apps CORS issue

问题

我有一个关于我的Web应用程序的大问题。
从一些信息开始...后端是ASP.NET Core 6,前端是React。
我使用Azure容器应用程序将此站点部署在同一资源组中,并在同一容器环境中。

一切都正常,直到我决定将后端的可见性从External更改为Internal。
从那一刻开始,当前端调用后端时,我遇到了CORS错误,后端从未被调用。

在应用程序的Program.cs中已经管理了接受所有请求的CORS策略。但它仍然不起作用。

英文:

I have a big problem with my web app.
Starting with some info... the backend is in ASP.NET Core 6, and the frontend is in React.
I deploy this site using Azure Container Apps inside the same Resource Group end in the same Container Environment.

All works fine until I decided to change backend visibility from External to Internal.
From this moment, when the frontend calls backend I have CORS error and the backend is never called.

Inside the Program.cs of the application is managed yet the CORS policy that accepting ALL. But it still don't work.

答案1

得分: 1

任何浏览器调用的端点必须是外部的。否则,浏览器将无法访问它。内部端点用于服务器之间的通信或微服务相互通信。就像一个 Web 应用程序使用 Redis 作为缓存,浏览器从不与 Redis 通信。它与 Web 应用程序通信,然后 Web 应用程序决定是否从 Redis 请求某些内容。

类似地,如果您将 React 应用程序和 API 后端部署为两个应用程序,但希望在浏览器中运行的 React 应用程序直接调用 API,则需要使它们都是外部的。

如果您希望将 API 应用程序设置为内部的,则需要将调用发送到 React 应用程序后端并将其代理到内部应用程序。

参见:

英文:

Any endpoint the browser calls must be external. Otherwise the browser won't be able to reach it. Internal endpoints are for server to server communication or microservices talking to each other. Like a webapp using redis for a cache, the browser never talks to redis. It talks to the webapp, and the webapp decides whether to request something from redis or not.

Similarly, if you deploy your React app and your API backend as 2 apps, but expect the React app running in the browser to call your API back directly, then you need to make both external.

If you want to make the API app internal, then you'll need to send the calls to the react app backend and proxy them to the internal app there.

See:

huangapple
  • 本文由 发表于 2023年4月6日 20:54:03
  • 转载请务必保留本文链接:https://go.coder-hub.com/75949766.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定