Azure Functions V4 JavaScript跨域(CORS)报错但函数仍执行问题

这是因为CORS是浏览器层面的安全限制，而非服务器端的请求拦截机制，具体细节如下：

• 当浏览器发起跨域请求时，会先将请求发送到服务器，待服务器返回响应后，再检查响应头中的Access-Control-Allow-Origin等CORS相关字段是否符合配置规则。如果不符合，浏览器会抛出CORS错误，阻止前端代码读取响应内容，但此时请求已经完全到达服务器并被处理完毕。
• Azure Functions的CORS配置仅负责控制响应中返回的CORS头信息，不会在服务器端主动拒绝跨域请求。只要请求能到达你的函数（比如你的函数设置为匿名访问），服务器就会正常执行函数逻辑，无论请求是否来自允许的源。

如果需要在服务器端主动拦截不符合CORS规则的请求，你可以在函数handler中手动添加校验逻辑，比如检查请求的Origin头是否在允许的列表中，若不匹配则直接返回403状态码：

const { app } = require('@azure/functions');
const ALLOWED_ORIGINS = ['https://your-allowed-domain.com']; // 替换为你的允许源

app.http('contact', {
    methods: ['POST'],
    authLevel: 'anonymous',
    handler: async (request, context) => {
        const origin = request.headers.get('origin');
        if (!ALLOWED_ORIGINS.includes(origin)) {
            return { status: 403, body: 'Forbidden' };
        }
        
        console.log('executed');
        return {
            status: 200,
            headers: {
                'Access-Control-Allow-Origin': origin // 动态返回允许的源
            },
            body: 'OK',
        }
    }
});

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