Azure API 管理中的 CORS 问题答案

【问题标题】：CORS issue in Azure API ManagementAzure API 管理中的 CORS 问题
【发布时间】：2015-09-25 17:02:29
【问题描述】：

我正在使用 Azure API 管理，它在内部访问我的 python Flask Web 服务。 Azure API 适用于 GET 操作。对于 POST，当我进行 jquery AJAX 调用时，请求被转换为 OPTIONS 并出现以下错误

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://domain.com' is therefore not allowed access. The response had HTTP status code 500.

我为 Azure API 添加了以下策略，

<policies>
    <inbound>
        <cors>
            <allowed-origins>
                <origin>*</origin>
            </allowed-origins>
            <allowed-methods>
                <method>*</method>
            </allowed-methods>
            <allowed-headers>
                <header>*</header>
            </allowed-headers>
        </cors>
        <base />
    </inbound>
    <outbound>
        <base />
    </outbound>
</policies>

但我仍然面临同样的问题。

当我直接向我的 python 烧瓶服务发出 AJAX POST 请求时出现了同样的错误，我通过在烧瓶中添加以下代码来修复它，

@app.after_request
def after_request(response):
  response.headers.add('Access-Control-Allow-Origin', '*')
  response.headers.add('Access-Control-Allow-Headers', 'Content-Type,Authorization')
  response.headers.add('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE')
  return response

我应该在 Azure API 管理中进行哪些更改才能使 POST 操作正常工作？？

【问题讨论】：

我最近注意到我的 Azure api 中的 CORS 失败，截至今天。这也是您最近遇到的问题吗？
我们也注意到了它们，从昨天开始。
是的。最近的问题，浪费了一整天的时间。微软预计不会

标签： jquery python ajax azure azure-api-management

【解决方案1】：

上一个版本中存在一个 CORS 错误，现已解决。

【讨论】：

【解决方案2】：

在我的测试中，我在origin标签中设置了通配符（*），然后我重现了你的问题，然后我尝试将allow-origins标签中的URL指定为http://localhost:8801而不是（ *)，它通过了。

这是我的代码 sn-ps，供您参考：

警察： <inbound> <cors allow-credentials="false"> <allowed-origins> <origin>http://localhost:8801</origin> </allowed-origins> <allowed-methods> <method>*</method> </allowed-methods> <allowed-headers> <header>*</header> </allowed-headers> </cors> <base /> </inbound>

JS代码是API管理门户上显示的示例：

$(function() { $.ajax({ url: "https://garytest.azure-api.net/testpost/", beforeSend: function(xhrObj){ // Request headers xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key","{subscription key}"); }, type: "POST", // Request body data: {name:'gary',sex:'male'}, }) .done(function(data) { alert("success"); }) .fail(function() { alert("error"); }); });

Flask 服务 很简单： @app.route('/post',methods=['POST']) def post(): name = request.form['name'] sex = request.form['sex'] return "post name: "+name+", sex:"+sex

请尝试指定来源，然后重新测试。

【讨论】：

【解决方案3】：

使用此配置进行临时忽略 cors 检查

<cors allow-credentials="false">
        <allowed-origins>
            <!-- Localhost useful for development 
            <origin>http://localhost:4200</origin>-->
            <origin>*</origin>
        </allowed-origins>
        <allowed-headers>
            <!-- Examples below show Azure Mobile Services headers -->
            <header>*</header>
        </allowed-headers>
        <expose-headers>
            <!-- Examples below show Azure Mobile Services headers -->
            <header>*</header>
        </expose-headers>
    </cors>

【讨论】：

【解决方案4】：

在 API 管理中添加以下策略 -

<inbound>
    <cors>
        <allowed-origins>
            <origin>*</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>
</inbound>

关键解决方案 - 删除 - 入站标签下的基本标签并保存。

【讨论】：