Vue 3 Instagram 动态 - CORS

Question

我正在尝试使用 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 :)

Answer 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'])