Fatal编程技术网
  • azure/
  • 如何为CORS配置Azure API管理

如何为CORS配置Azure API管理

azure cors

如何为CORS配置Azure API管理,azure,cors,azure-api-management,Azure,Cors,Azure Api Management,我已经创建了Azure API管理服务并连接了我的API。我向它们添加了CORS策略 我检查了计算有效策略，结果是该策略 由于CORS，它们都失败了。我试图添加飞行前结果max age=“300”，还指定了允许的头文件，就像我用来传递订阅密钥的头文件一样，但没有成功。我还试图在我的服务器上复制此文件，但出现了相同的错误 作为origin我设置了*，因为我认为通过这种方式，每个URL的每个请求都会被接受，但显然不会 在Azure API管理中应用哪些正确设置来避免CORS？我认为启用开发人员

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

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

由于
CORS
，它们都失败了。我试图添加
飞行前结果max age=“300”
，还指定了
允许的头文件
，就像我用来传递订阅密钥的头文件一样，但没有成功。我还试图在我的服务器上复制此文件，但出现了相同的错误

作为
origin
我设置了
*
，因为我认为通过这种方式，每个URL的每个请求都会被接受，但显然不会

在Azure API管理中应用哪些正确设置来避免
CORS
？

我认为启用
开发人员门户时会出现问题。然后，在门户的配置中，启用
CORS
。此时，Azure会自动向
API管理服务添加一个全局策略，但您不知道这一点


<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>


我的理解是门户将基本配置与您的配置相结合。因此，像在
Active Directory
中一样，更严格的策略正在应用。这意味着在我的示例中，只有
Developer门户
可以在没有
CORS
问题的情况下调用api

解决方案

删除
下的
并保存。
在web服务器上安装test.html文件并进行测试时会发生什么？（我的意思是不要直接从本地文件系统将test.html文件打开到浏览器中。）我收到了相同的错误

<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>



<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>



<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>