向https://sambhav.daily.co/v1/rooms发POST请求被CORS策略拦截报错

DevOps 小满

2026-10-13

问题核心原因

你混淆了CORS头的生效位置：Access-Control-Allow-Origin、Access-Control-Allow-Methods这类CORS响应头必须由被请求的服务端（也就是daily.co的接口服务）在返回包中设置，前端在请求头里加这些字段完全无效，甚至会触发额外的预检请求校验
你当前的使用方式存在严重安全风险：Daily.co的API密钥明文写在前端代码中，任何访问你页面的用户都可以直接获取密钥，篡改、删除你名下的所有房间资源，Daily.co本身也禁止前端直接调用需要鉴权的管理类接口，所以接口本身就不会返回允许跨域的头
代码本身存在参数传错的问题：Angular HttpClient.post的第二个参数是请求体，第三个才是请求配置项，你现在把headers放在了请求体的位置，实际请求根本没有带上你设置的头信息

可行解决方法

方案1（生产环境唯一推荐）：加一层自研后端服务转发请求
所有需要调用Daily.co API的请求都先发给你自己的后端服务，后端带上API密钥向Daily.co发起请求，拿到结果后再返回给前端。你自己的后端可以配置允许http://localhost:8000的跨域请求，同时也彻底避免了API密钥泄露的风险
方案2（仅适用于本地开发调试）：用开发服务代理转发
如果你用的是Angular CLI，可以在项目根目录新增proxy.conf.json配置文件：
```
{
  "/v1/rooms": {
    "target": "https://sambhav.daily.co",
    "secure": true,
    "changeOrigin": true,
    "headers": {
      "Authorization": "Bearer <你的API密钥>"
    }
  }
}
```
之后修改前端请求地址为/v1/rooms，启动开发服务时加上--proxy-config proxy.conf.json参数，本地开发服务器会自动转发请求，直接规避跨域限制

修正后的请求代码参考：

addRoom(): Observable<any> {
  const headers = new HttpHeaders()
    .set("content-type", "application/json")
    .set(
      "Authorization",
      `Bearer <API-KEY>`
    );
  return this.http
    // 第二个参数是请求体，第三个参数才是配置项
    .post(URL, {}, { headers: headers })
    .map((response: any) => response.data)
    .catch(this.handleError);
}

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