Access-Control-Allow-Origin 在 Python(Google Colab) 发出请求时添加到 header，但在 ReactJS 发出请求时则不会

Question

我的应用程序结构如下：React 前端 -> Azure Api 管理 -> Flask 后端。

Flask 应用程序允许所有来源。

app = Flask(__name__)
CORS(app, resources={r"/*": {"origins": "*"}})

Azure Api 管理入站和出站策略如下所示：

<policies>
    <inbound>
        <base />
        <set-backend-service id="apim-generated-policy" backend-id="webapp_test" />
        <cors allow-credentials="true">
            <allowed-origins>
                <origin>https://va-prod-dashboard.azurewebsites.net</origin>
                <origin>http://localhost:9000</origin>
                <origin>http://localhost:3000</origin>
            </allowed-origins>
            <allowed-methods>
                <method>GET</method>
                <method>POST</method>
            </allowed-methods>
        </cors>
    </inbound>
    <backend>
        <base />
    </backend>
    <outbound>
        <base />
    </outbound>
    <on-error>
        <base />
    </on-error>
</policies>

当我尝试从 React 前端发出 POST 请求时，问题开始了。当从 python(google colab 发出请求时，我打印了响应 header 并且它有 Access-Control-Allow-Origin: *(all ).

React post 请求失败并显示：请求的资源上不存在 'Access-Control-Allow-Origin' header。

令我奇怪的是只有post个请求失败，只有在javascript.

有人知道罪魁祸首是什么吗？

感谢您花时间阅读本文！

Answer 1

感谢 Daniel W 的宝贵建议。作为答案发布以帮助其他社区成员。

You need to add <cors> directive also to <outbound>.

CORS are sent by the server, not by the client, pretty sure it's to do with the MS Proxy.

Please refer this Microsoft-Doc-CORS-APIM for more information.

Access-Control-Allow-Origin 在 Python(Google Colab) 发出请求时添加到 header，但在 ReactJS 发出请求时则不会

Access-Control-Allow-Origin is added to the header when request is made from Python(Google Colab), but not when the request is made from ReactJS

cors

reactjs

azure-api-management

flask-cors