React中调用Twitter API报错但Postman可正常请求怎么解决？

• 跨域资源共享(CORS)限制：这是最核心的问题。浏览器出于同源策略的安全限制，会禁止前端页面直接向跨域的第三方接口发起请求，而Postman属于桌面客户端工具，不受同源策略约束，所以可以正常拿到返回结果。Twitter官方API默认没有配置允许前端跨域调用的响应头，所以浏览器直接发起请求会被拦截。
• Bearer Token编码错误：你当前使用的Token中包含URL编码后的字符%3D（对应原字符为等于号=），Postman会自动对请求头中的编码字符做适配处理，而axios不会自动解码请求头中的内容，会导致鉴权失败。
• 多余请求头校验问题：GET请求本身没有请求体，不需要携带Content-Type: application/json请求头，部分接口的校验规则会因为多余的请求头拒绝响应。

• 优先解决跨域问题，通过代理转发请求：
  本地开发阶段如果使用create-react-app搭建的项目，直接在package.json中添加配置项"proxy": "https://api.twitter.com"，之后把axios请求的接口前缀去掉，改为相对路径即可，本地开发服务器会自动转发请求，绕过跨域限制。
  生产环境需要使用自己的后端服务做代理转发，前端先把请求发送给自己的后端，后端再转发到Twitter API，拿到结果后返回给前端，从根源上避免跨域问题。
• 修正请求参数和请求头：
  将Token中的%3D替换为原始的等于号=，删除GET请求中多余的Content-Type请求头，修正后的请求代码示例如下：

  useEffect(() => {
    axios
      .get(
        '/2/tweets?ids=1458693399138037761,1440916738858622978',
        {
          headers: {
            Accept: 'application/json',
            Authorization:
              'Bearer AAAAAAAAAAAAAAAAAAAAAMcSUQEAAAAAUrzNhYNWotZNhxTdNb1zm5yXrME=oDW9Ja6gRoDtORl8GDKtjfqrwJ4TDSb0Pa7Sg69cQOEieb69W',
          },
        }
      )
      .then((res) => {
        console.log(res.data);
        // setPosts(res.data.data)
      })
      .catch((err) => {
        console.log(err);
      });
  }, []);
  

• 仅本地调试场景下，也可以安装浏览器跨域插件临时关闭同源策略，该方案仅可用于调试，不能用于线上生产环境。

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