调用Trovo开放平台API遇CORS拦截 本地与生产环境均报错

• 先排查你是否装了篡改请求头的浏览器插件，或是写了全局fetch拦截器，自动给所有请求加了Access-Control-Allow-Origin头。这个字段是服务端返回响应时用的，客户端请求里完全不需要带，Trovo的CORS预检规则根本不允许请求携带这个字段，这就是你当前报错的直接触发原因，不管是本地还是生产环境，带了这个头必然被拦截。
• 核对Trovo平台的域名白名单配置：你只添加了生产环境域名的话，本地调试用的http://localhost:3000不在白名单范围内，本地请求被拦是正常现象。要本地调试要么临时把localhost加入白名单，要么本地开发时配置服务端代理转发请求。
• 修正请求头与请求体不匹配的问题：你当前传的请求体是JSON格式字符串，但Content-Type写的是application/x-www-form-urlencoded，就算过了CORS校验，接口也无法正确解析你传的参数，传JSON数据时要把Content-Type改成application/json。
• 不要手动在请求头里添加Origin字段，浏览器发起跨域请求时会自动携带当前站点的Origin值，手动添加反而可能触发预检异常。

const fetchProfile = async () => {
  const res = await fetch(
    "https://open-api.trovo.live/openplatform/channels/id",
    {
      method: "POST",
      headers: {
        Accept: "application/json",
        "Client-ID": process.env.TROVO_CLIENT_ID,
        "Content-Type": "application/json",
        // 不要手动添加Origin、Access-Control-Allow-Origin这类字段
      },
      body: JSON.stringify({username:"test"}),
    }
  )
  return res.json()
}

不要在前端代码里直接请求Trovo开放接口，把这部分逻辑移到自有服务端做转发：

• 前端只请求自有域名下的接口，完全不存在CORS问题
• 你的Client-ID不会暴露在前端静态资源中，避免被恶意盗用
• 服务端发请求不受浏览器同源策略限制，不需要配置白名单也能正常调用

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