azure - 由于 CORS 问题，无法从 Azure APIM 后面的网页调用 API

Question

我正在使用 Azure APIM，我的 API 托管在由 .net core 编码的 Azure 应用服务上。我已经在 APIM 后面配置了我的 api。然而，当我尝试调用我的 API 时，我遇到了这个问题:

Access to fetch at '' from origin 'http://localhost:8080' 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. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

这是我调用 API 的 js 代码:

var url='<the url of my api in APIM>';
fetch(url, {
    method: "POST",
    headers: {
        "Content-Type": "application/json",
        "Seckey":"xxxxxx"
    },
    body: '<some json content>'
    }).then(function(res) {
        console.log("Response succeeded?", JSON.stringify(res.status));
        console.log(JSON.stringify(res));
    }).catch(function(e) {
    console.log("fetch fail", JSON.stringify(e));
});

我知道这是一个 CORS 问题，并且我已根据此文档在 APIM 中配置了 CORS 策略: https://learn.microsoft.com/en-us/azure/api-management/api-management-cross-domain-policies#CORS

但是并没有解决这个问题。那么我错过了什么吗？

提前致谢。

Answer 1

正如 @Thiago Custodio 所说，您应该在 Azure 应用服务和 APIM 中配置 CROS。

顺便说一句，如果您为 Azure 应用服务启用了 CROS，请检查您是否在 APIM 中正确配置了 CORS，根据您的请求，我注意到您有一个自定义 header :Seckey，您是否在 CORS 策略中配置了它？

如果没有，请尝试下面的 CORS 策略，否则您将遇到 CORS 问题:

<cors >
    <allowed-origins>
        <origin>http://localhost:8080/</origin> 
    </allowed-origins>
    <allowed-methods preflight-result-max-age="300">
        <method>POST</method>
    </allowed-methods>
    <allowed-headers>
        <header>Content-Type</header>
        <header>Seckey</header>
    </allowed-headers>
</cors>

希望有帮助。