Vue3结合Axios调用Instagram接口遭遇CORS跨域拦截问题求助

问题核心原因 #

• Instagram Basic Display API 官方不允许前端直接发起跨域请求，响应未返回Access-Control-Allow-Origin头，浏览器出于安全规则自动拦截请求，和你本地的令牌配置没有关系。
• strict-origin-when-cross-origin是浏览器默认的Referrer策略，不是拦截请求的根本原因。
• 前端没有任何办法直接绕过浏览器CORS限制，所有合规方案都需要走代理转发。

本地开发环境解决方案 #

用Vue自带的开发代理功能即可，不需要引入第三方代理服务：

如果你用Vite创建项目 #

修改vite.config.js配置：

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

修改Home.vue中的请求地址：

axios.get('/ig-api/me?fields=id&access_token=myToken')

启动开发服务后请求会自动转发到Instagram接口，不会触发跨域。

如果你用Vue CLI创建项目 #

修改vue.config.js配置：

module.exports = {
  devServer: {
    proxy: {
      '/ig-api': {
        target: 'https://api.instagram.com',
        changeOrigin: true,
        pathRewrite: { '^/ig-api': '' }
      }
    }
  }
}

请求地址修改逻辑和Vite场景一致。

生产环境合规解决方案 #

公共CORS代理存在安全风险、稳定性不可控，且直接把access_token暴露在前端请求中本身就违反Instagram API使用规范，容易导致令牌泄露被盗用，推荐以下两种合规方案：

方案1：自有后端转发 #

在你自己的后端服务中新增一个转发接口，前端请求你自己的后端接口，由后端发起对Instagram API的请求再把结果返回给前端，access_token直接存在后端不对外暴露，从根源避免跨域和令牌泄露问题。

方案2：私有Cloudflare Worker代理 #

如果没有自有后端，可以自己搭建私有Cloudflare Worker做转发，示例代码如下：

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})
// 令牌直接存在Worker中，不对外暴露
const IG_TOKEN = '你的Instagram access_token'
// 替换为你自己的生产站点域名
const ALLOW_ORIGIN = 'https://your-production-domain.com'

async function handleRequest(request) {
  // 处理预检请求
  if (request.method === 'OPTIONS') {
    return new Response(null, {
      headers: {
        'Access-Control-Allow-Origin': ALLOW_ORIGIN,
        'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
        'Access-Control-Allow-Headers': '*'
      }
    })
  }
  const url = new URL(request.url)
  const igPath = url.pathname.replace(/^\/ig-proxy/, '')
  const igUrl = new URL(`https://api.instagram.com${igPath}${url.search}`)
  igUrl.searchParams.set('access_token', IG_TOKEN)

  const response = await fetch(igUrl, {
    headers: {
      'User-Agent': 'Mozilla/5.0'
    }
  })
  // 给响应添加CORS头
  const newResponse = new Response(response.body, response)
  newResponse.headers.set('Access-Control-Allow-Origin', ALLOW_ORIGIN)
  return newResponse
}

部署后前端直接请求Worker的/ig-proxy/me?fields=id即可，不需要在前端携带令牌，完全符合安全规范。

现有代码优化提示 #

你当前App.vue中inject('axios')没有返回，Home.vue中无法直接拿到axios实例，建议调整为：
App.vue的setup中：

setup() {
  const axios = inject('axios')
  return { axios }
}

或者直接在Home.vue中引入axios，避免实例丢失问题。

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