从Angular 1.6调用Azure函数时遇到CORS问题

你这碰到的是典型的跨域CORS问题，还带着预检请求返回400的情况，我给你梳理几个排查和解决的方向：

一、先确认Azure函数的CORS配置是否到位 #

这是最容易踩坑的地方，得在Azure门户里给函数应用配置允许的源：

• 登录Azure门户找到你的函数应用
• 进入API > CORS设置页面
• 在「允许的源」里添加你的前端域名（就是报错里的<Origin domain>），开发环境可以暂时用*测试，但生产环境一定要指定具体域名，别偷懒用通配符
• 最重要的一步：保存配置！很多人改完忘了点保存，白忙活半天

二、检查预检请求（OPTIONS）的处理逻辑 #

Azure函数默认会自动处理OPTIONS请求，但如果你的自定义代码拦截了这个请求，就会导致返回400：

• 要是用的C#函数，别在代码里手动处理OPTIONS请求，交给Azure的CORS中间件来搞定就行
• 要是用的Node.js函数，得确保代码里正确处理OPTIONS方法，比如：

module.exports = async function (context, req) {
    if (req.method === 'OPTIONS') {
        context.res = {
            status: 200,
            headers: {
                'Access-Control-Allow-Origin': '<你的前端域名>',
                'Access-Control-Allow-Headers': 'Content-Type, Authorization'
            }
        };
        return;
    }
    // 下面写你的正常业务逻辑
};

三、核对请求头是否在CORS允许列表里 #

你代码里设置了自定义headers，得确保这些头是Azure CORS配置允许的：

• 在Azure门户的CORS设置里，「允许的请求头」要包含你发送的所有头（比如Content-Type、Authorization这类）
• 如果有自定义头，一定要手动加到这个列表里，不然预检请求直接就失败了

四、排查HTTP 400错误的具体原因 #

预检请求返回400不一定全是CORS的锅，你可以用Postman直接发OPTIONS请求到函数URL，看看具体错误：

• 发送OPTIONS请求时带上Origin头，值设为你的前端域名
• 查看响应的详细内容，里面的错误提示能帮你更快定位问题

另外，你那AngularJS的$http.post写法有点小问题，可能也会导致请求格式错误触发400，调整成这样更规范：

$http.post(url, data, {
    headers: headers
})
.success(function (jSendResponse, status, headers) {
    console.warn("worked");
})
.error(function (errResponse) {
    console.warn('failed')
});

原来的写法把data和headers都塞到第二个参数里了，不符合$http.post的参数规范，这也可能是请求失败的隐藏原因哦。

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