调用Twitter API 1.1获取用户关注列表时出现CORS报错

• 尝试调用Twitter官方API端点拉取指定用户的关注/粉丝好友列表
• 本次调用使用的API端点：

https://api.twitter.com/1.1/friends/list.json

• 参考接口说明截图：
  
• 已在浏览器端做了CORS相关处理，但调用接口时仍然返回CORS类错误
• 当前使用的fetch请求实现代码：

const response = await fetch('https://api.twitter.com/1.1/friends/list.json',{
    method: 'GET',
    headers : {
        "Content-Type": "application/json;charset=UTF-8",
        'Authorization' : 'Bearer my_token'
    }
})

CORS策略是由接口服务端控制的，Twitter的v1.1系列API本身就不支持浏览器端直接跨域调用，不会返回Access-Control-Allow-Origin相关的跨域允许响应头，你在前端做任何CORS配置都无法绕过这个限制，浏览器会直接拦截接口响应。
另外当前实现还有两个额外问题：

1. 把Bearer Token直接硬编码在前端代码里会造成凭证泄露，任何用户打开浏览器控制台都能拿到你的API密钥，存在被滥用的风险
2. GET请求没有请求体，你额外添加的Content-Type: application/json;charset=UTF-8属于非简单请求头，会触发浏览器提前发送OPTIONS预检请求，进一步提升CORS报错的概率

• 把Twitter API调用逻辑迁移到自有后端服务：前端只和你自己的后端服务交互，由后端携带鉴权凭证请求Twitter API，拿到数据后再返回给前端。服务端发起HTTP请求不受浏览器CORS策略限制，是生产环境最稳妥的实现方式
• 如果必须在前端直接调用Twitter接口，改用官方支持前端调用的Twitter API v2版本，搭配官方提供的前端SDK完成标准OAuth授权流程，禁止在前端代码里硬编码API鉴权凭证
• 调试阶段如果只是临时测试，可以用本地代理工具转发请求绕开浏览器CORS限制，但这种方式不能用于生产环境

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