React调用Instagram Basic Display API换token报CORS跨域错误

核心原因 #

你遇到的问题不是代码写法错误，是Meta近期调整了Instagram Basic Display API的接口安全策略：https://api.instagram.com/oauth/access_token 接口已关闭跨域资源共享（CORS）支持，明确禁止从浏览器端直接发起调用。两个月前代码可正常运行是当时接口临时放开了跨域限制，目前该兼容策略已下线。
另外从OAuth安全规范来说，携带client_secret的token兑换请求本身就不应该在前端发起——前端代码里的密钥可以被任意用户通过控制台扒取，属于严重安全隐患，之前前端直接调用的方式本身就不符合平台安全要求。

解决步骤 #

• 生产环境方案：将token兑换逻辑迁移至服务端
  调整OAuth流程为以下链路：
  1. 前端完成Instagram授权跳转，拿到URL携带的授权code
  2. 前端将code发送至自有服务的后端接口
  3. 后端在服务端构造请求，调用Instagram的token兑换接口获取access_token，再将非敏感的返回结果传递给前端，或直接将token关联用户会话存在服务端
• 本地开发临时调试方案：用本地代理转发请求绕开浏览器CORS限制
  如果你只是本地调试不想临时搭建后端，可以通过前端开发工具自带的代理能力转发请求，比如Vite项目可在配置文件中添加如下代理规则：

  // vite.config.js
  export default defineConfig({
    server: {
      proxy: {
        '/ig-auth': {
          target: 'https://api.instagram.com',
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/ig-auth/, '/oauth/access_token')
        }
      }
    }
  })
  

  配置后将前端的axios请求地址改为本地代理路径/ig-auth即可正常调试，注意该方案仅可用于本地开发，生产环境必须走服务端调用。
• 低优先级排查项：核对应用后台配置
  确认Instagram应用后台的有效OAuth重定向URI列表中，已添加你代码中使用的redirect_uri值，需完全匹配（包括协议、域名、端口、末尾斜杠），该配置错误通常会返回redirect_uri_mismatch错误，不会触发CORS，可在解决跨域问题后再核对。

避坑提醒 #

不要通过关闭浏览器安全策略、安装CORS篡改插件的方式绕开限制，这类方案仅能在你本地浏览器生效，无法在生产用户环境运行，同时前端暴露client_secret可能导致应用接口额度被盗刷，甚至被Meta封禁应用权限。

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