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

【问题标题】：Failed to call APIs from web page behind Azure APIM due to CORS issues由于 CORS 问题，无法从 Azure APIM 后面的网页调用 API
【发布时间】：2020-04-07 14:10:03
【问题描述】：

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

从原点获取 '' 的访问权限 'http://localhost:8080' 已被 CORS 策略阻止：响应预检请求未通过访问控制检查：否请求中存在“Access-Control-Allow-Origin”标头资源。如果不透明的响应满足您的需求，请设置请求的模式为“no-cors”以获取禁用 CORS 的资源。

这是我调用我的 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://docs.microsoft.com/en-us/azure/api-management/api-management-cross-domain-policies#CORS

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

提前致谢。

【问题讨论】：

标签： azure cors

【解决方案1】：

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

顺便说一句，如果您为 Azure 应用服务启用了 CROS，请检查您是否在 APIM 中正确配置了 CORS，根据您的请求，我注意到您有一个自定义标头：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>

希望对您有所帮助。

【讨论】：

【解决方案2】：

您将保单放在哪里？ CORS 仅适用于 API 和操作级别，不适用于产品级别。有关 APIM 中策略的范围，请参阅此博客。 https://blogs.perficient.com/2016/12/28/policy-scope-in-azure-api-management/

这是有效的 Azure APIM CORS 策略示例的摘录。

      <inbound>
            </base>
            <cors allow-credentials="true">
                <allowed-origins>
                    <origin>http://localhost/</origin>
                </allowed-origins>
                <allowed-methods preflight-result-max-age="300">
                    <method>GET</method>
                    <method>POST</method>
                </allowed-methods>
                <allowed-headers>
                    <header>Authorization</header>
                    <header>Ocp-Apim-Subscription-Key</header>
                    <header>content-type</header>
                </allowed-headers>
            </cors>
        </inbound>
        
        <outbound>
            <base />
            
            <!--CORS-->
            <set-header name="Access-Control-Allow-Credentials" exists-action="override">
                <value>true</value>
            </set-header>
    
            <set-header name="Access-Control-Allow-Headers" exists-action="override">
                <value>*</value>
            </set-header>
        </outbound>

一些文档建议在出站中也添加此标头。

    <set-header name="Access-Control-Allow-Origin" exists-action="override">
                    <value>@(context.Request.Headers.GetValueOrDefault("Origin",""))</value>
                </set-header>

【讨论】：