如何解决Angular 16调用Zoho Expense Report API的CORS问题？

以下是针对你的情况的可行解决方案，按优先级尝试：

1. 检查Zoho开发者控制台的可信域名配置 #

Zoho的客户端应用需要明确授权允许跨域请求的来源域名：

• 登录Zoho开发者控制台，找到你的Expense应用
• 进入客户端设置或CORS设置页面
• 添加你的Angular应用的完整域名（比如开发环境的http://localhost:4200，生产环境的实际域名）
• 保存配置后，等待5-10分钟让设置生效，再重新测试请求

2. 使用Angular开发代理绕过CORS限制（仅开发环境） #

开发环境下，Angular内置的代理可以帮你规避浏览器的CORS检查：

• 在项目根目录创建proxy.conf.json文件，内容如下：

{
  "/expenseapi": {
    "target": "https://www.zohoapis.com/expense/v1",
    "secure": true,
    "changeOrigin": true,
    "pathRewrite": {
      "^/expenseapi": ""
    }
  }
}

• 修改angular.json中的serve配置，添加proxyConfig：

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "your-project-name:build",
    "proxyConfig": "proxy.conf.json"
  }
}

• 重启Angular开发服务器，然后把请求路径从https://www.zohoapis.com/expense/v1/expense-reports改成/expenseapi/expense-reports

3. 确认预检请求（OPTIONS）的处理 #

浏览器发送CORS预检请求时，Zoho服务器需要返回正确的响应头：

• 确保你的请求头没有包含Zoho API不允许的自定义头（除了你已经设置的三个头之外）
• 检查请求方法是否为GET/POST等Zoho允许的方法，避免使用非常规方法触发预检失败

4. 验证请求头的正确性 #

虽然Postman能成功，但Angular中可能存在头信息的拼写或格式错误：

• 确认Authorization头的格式是Bearer {access_token}，不要遗漏Bearer前缀
• 检查X-com-zoho-expense-organizationid的大小写和拼写完全匹配，Zoho的头信息通常区分大小写
• 确保Content-Type设置为application/json（如果是POST请求），不要设置为其他不兼容的值

5. 生产环境解决方案 #

如果是生产环境部署，需要通过后端代理转发请求：

• 在你的后端服务（比如Node.js、Java等）中创建一个接口，接收Angular的请求，然后转发到Zoho Expense API
• Angular调用自己的后端接口，避免直接跨域请求Zoho的API

内容的提问来源于stack exchange，提问作者Fatih Ozan Arslan