如何为 CORS 配置 Azure API 管理

Question

如何为 CORS 配置 Azure API 管理

Enr*_*ico 10 azure cors azure-api-management

我已经创建了 Azure API 管理服务并连接了我的 API。我CORS给它们添加了策略。

我检查了计算有效策略，结果是这个策略

<policies>
    <inbound>
        <!-- base: Begin Product scope -->
        <!-- base: Begin Global scope -->
        <cors allow-credentials="true">
            <allowed-origins>
                <origin>https://developer.mydomain.com</origin>
            </allowed-origins>
            <allowed-methods preflight-result-max-age="300">
                <method>*</method>
            </allowed-methods>
            <allowed-headers>
                <header>*</header>
            </allowed-headers>
            <expose-headers>
                <header>*</header>
            </expose-headers>
        </cors>
        <!-- base: End Global scope -->
        <!-- base: End Product scope -->
        <cors>
            <allowed-origins>
                <origin>*</origin>
            </allowed-origins>
            <allowed-methods>
                <method>GET</method>
                <method>POST</method>
            </allowed-methods>
        </cors>
    </inbound>
    <backend>
        <!-- base: Begin Product scope -->
        <!-- base: Begin Global scope -->
        <forward-request />
        <!-- base: End Global scope -->
        <!-- base: End Product scope -->
    </backend>
    <outbound />
    <on-error />
</policies>

Run Code Online (Sandbox Code Playgroud)

如果我用 C# 调用 API，它就可以工作。然后，我创建了一个简单的 JavaScript 来调用 API，但没有办法避免CORS。我尝试了不同的 JavaScript

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    </head>
    <body>
        <script>
        var url = '';
        var headerKey = 'subscription-Key';
        var headerValue = 'e1e21';

        $.ajax({
            url: url,
            beforeSend: function(xhrObj){
                // Request headers
                xhrObj.setRequestHeader("Origin","https://www.puresourcecode.com/");
                xhrObj.setRequestHeader("Access-Control-Allow-Origin","https://www.puresourcecode.com/");
                xhrObj.setRequestHeader("Access-Control-Request-Method","GET");
                xhrObj.setRequestHeader("Access-Control-Allow-Credentials","true");
                xhrObj.setRequestHeader("Access-Control-Request-Headers","X-Custom-Header");
                xhrObj.setRequestHeader("Access-Control-Allow-Headers","Origin, Content-Type, Accept, Authorization, X-Request-With");
                xhrObj.setRequestHeader(headerKey,headerValue);
            },
            type: "GET",
            contentType: "application/json; charset=utf-8",
        })
        .done(function(data) {
            alert("success");
        })
        .fail(function() {
            alert("error");
        });

        // jQuery preflight request
        $.ajax({
            type: "GET",
            headers: {headerKey: headerValue},
            url: url
        }).done(function (data) {
            console.log(data);
        });
        
        // XMLHttpRequest preflight request
        var xhr = new XMLHttpRequest();
        xhr.open("GET", url, true);
        xhr.setRequestHeader(headerKey, headerValue);
        xhr.onload = function () {
            console.log(xhr.responseText);
        };
        xhr.send();
        
        // Fetch preflight request
        var myHeaders = new Headers();
        myHeaders.append(headerKey, headerValue);
        fetch(url, {
            headers: myHeaders
        }).then(function (response) {
            return response.json();
        }).then(function (json) {
            console.log(json);
        });
        </script>
    </body>
</html>

Run Code Online (Sandbox Code Playgroud)

他们都失败了，因为CORS。我尝试添加preflight-result-max-age="300"并指定了allowed-headers类似我用来传递订阅密钥的内容，但没有成功。我还尝试将此文件复制到我的服务器中，但出现相同的错误。

正如origin我所设置的*，因为我认为每个 URL 的每个请求都会被接受，但显然不会。

在 Azure API 管理中应用应避免的正确设置是什么CORS？

Answer 1

Enr*_*ico 13

我认为当您启用Developer portal. 然后，在门户的配置中，启用CORS. 此时，Azure 会自动添加一个全局策略，API Management Service但你并不知道。

<policies>
    <inbound>
        <!-- base: Begin Global scope -->
        <cors allow-credentials="true">
            <allowed-origins>
                <origin>https://developer.mydomain.com</origin>
            </allowed-origins>
            <allowed-methods preflight-result-max-age="300">
                <method>*</method>
            </allowed-methods>
            <allowed-headers>
                <header>*</header>
            </allowed-headers>
            <expose-headers>
                <header>*</header>
            </expose-headers>
        </cors>
        <!-- base: End Global scope -->
    </inbound>
</policies>

Run Code Online (Sandbox Code Playgroud)

令人高兴的是，您CORS在 API 中进行配置，当您尝试从 JavaScript 调用它们时，您会遇到错误CORS。

CORS如果您在 Azure 门户中打开配置，您可以看到类似的内容：

<policies>
    <inbound>
        <base />
        <cors>
            <allowed-origins>
                <origin>*</origin>
            </allowed-origins>
            <allowed-methods preflight-result-max-age="300">
                <method>GET</method>
                <method>POST</method>
            </allowed-methods>
            <allowed-headers>
                <header>*</header>
                <header />
            </allowed-headers>
            <expose-headers>
                <header>*</header>
            </expose-headers>
        </cors>
    </inbound>
    <backend>
        <base />
    </backend>
    <outbound>
        <base />
    </outbound>
    <on-error>
        <base />
    </on-error>
</policies>

Run Code Online (Sandbox Code Playgroud)

我的理解是门户将基本配置与您的配置结合起来。因此，就像Active Directory正在应用更严格的政策一样。这意味着在我的示例中，只有Developer Portal可以毫无问题地调用 API CORS。

解决方案

删除<base />下<inbound>并保存。

Answer 2

Dwa*_*wne 7

用户界面截图

我在设置的每个 API 管理中都遇到了同样的问题。我总是忘记自己做了什么来解决这个问题，所以这也是对未来的自己的一个提醒。

添加 CORS 策略，
允许的标头 *
启用允许凭据
在 URL 中包含斜杠

归档时间：	4 年，6 月前
查看次数：	23037 次
最近记录：	2 年，9 月前