调用Azure Function API时遇CORS错误，需修改API的index.ts吗？

问题翻译 #

我按照微软官方教程创建了Azure Function API，但在React应用中使用axios.post(url, postData)向其提交数据时，出现了CORS错误。请问我需要修改API文件夹中的index.ts文件吗？

解答 #

不需要直接修改index.ts文件来解决这个CORS问题，Azure Function有更标准的处理方式：

• 优先用Azure门户配置（推荐）
  登录Azure门户，找到你的Function App，进入「API」菜单下的「CORS」页面，把React应用的域名（本地开发一般是http://localhost:3000，生产环境填正式域名）添加到「允许的来源」列表，保存后即可生效。这种方式无需改动代码，是官方推荐的跨域配置方案。

• 特殊场景下的代码级处理
  如果需要动态控制允许的来源，可以在index.ts中手动添加CORS响应头，同时处理浏览器发送的OPTIONS预检请求，示例代码如下：

import { AzureFunction, Context, HttpRequest } from "@azure/functions";

const httpTrigger: AzureFunction = async function (context: Context, req: HttpRequest): Promise<void> {
    // 配置CORS响应头
    context.res.headers = {
        ...context.res.headers,
        'Access-Control-Allow-Origin': 'http://localhost:3000', // 替换为你的React应用域名
        'Access-Control-Allow-Methods': 'POST, OPTIONS',
        'Access-Control-Allow-Headers': 'Content-Type'
    };

    // 处理OPTIONS预检请求
    if (req.method === 'OPTIONS') {
        context.res.status = 200;
        return;
    }

    // 这里写原本的业务逻辑代码
    // ...
};

export default httpTrigger;

不过这种方式需要为每个Function单独配置，维护成本比门户配置高，只适合有特殊动态跨域需求的场景。

内容的提问来源于stack exchange，提问作者Atharane