Vue 3 Instagram 动态 - CORS

Posted 2023-03-04

【中文标题】Vue 3 Instagram 动态 - CORS

【英文标题】：Vue 3 Instagram Feed - CORS

【发布时间】：2021-11-26 07:00:05

【问题描述】：

我正在尝试使用 Vue 3 和 Axios 从提要中获取最新的 Instagram 帖子。 Instagram 推出了strict-origin-when-cross-origin 政策，所以我一直被屏蔽。访问令牌和一切都已经设置好了。

使用Instagram Basic Display API 的指南并没有什么帮助，大吃一惊。

ma​​in.js

import  createApp  from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

import App from './App.vue'
const app = createApp(App)

app.use(BootstrapVue3, VueAxios, axios)
app.provide('axios', app.config.globalProperties.axios)
app.mount('#app')

App.vue

<template>
    <Home />
</template>

<script>
import  inject  from 'vue'
import Home from './components/Home.vue'

export default 
    name: 'App',
    components:  Home ,
    setup() 
        inject('axios')
    

</script>

Home.vue

export default 
    name: 'Home',
    mounted() 
        axios.get('https://api.instagram.com/me?fields=id&access_token=myToken')
        .then(response => 
            console.dir(response)
        ).catch(err => 
            console.error(err)
        )
    

</script>

Access to XMLHttpRequest at 'https://api.instagram.com/me?access_token=myToken'
from origin 'http://localhost:1234' has been blocked by CORS policy: No 'Access-Control-Allow-Origin'
header is present on the requested resource.

CORS Header Proxy 或 cors-anywhere 当然会有所帮助，但我想正确地做到这一点......而且我不知道如何在 Vue 中实现 CORS Header Proxy :)

【问题讨论】：

“我想正确地执行此操作” 是什么意思？如果 Instagram 尚未为您的客户端域启用 CORS 访问，您将需要使用代理或使用服务器端技术编写应用程序的这一部分。没有其他选择

【参考方案1】：

您试图实现的目标不可能按原样实现，如果是这样，它将被视为浏览器错误。 CORS 旨在限制浏览器将通过 XMLHttpRequest (XHR) 加载的资源。

你有两个选择：

代理请求

正如@Phil 在他们的评论中提到的，您需要通过忽略 CORS 的某个后端代理请求。因此，后端可以发出请求、获取结果并将结果返回给您的 Vue 应用程序。后端逻辑应该非常简单，您也可以在那里使用axios。注意：这可能不安全，因为您需要将用户的访问令牌转发到后端。

编写一个浏览器扩展，添加access-control-allow-origin 标头

浏览器扩展能够修改请求和响应标头。编写一个扩展来做到这一点也很简单。你需要一个background script，内容与此类似：

browser.webRequest.onHeadersReceived.addListener((e) => 
  const  tabId, responseHeaders  = e
  // Add logic to ensure that the header modification only happens on _your_ requests
  responseHeaders.push(
    name: 'access-control-allow-origin',
    value: '<your domain>' // You can throw in '*', which is not a valid value but browsers ignore this error
  )
  return  responseHeaders 
,
 urls: ['https://api.instagram.com/*'] ,
['blocking', 'responseHeaders'])