I'm trying to fetch the latest Instagram posts from a feed using Vue 3 and Axios. Instagram has introduced a strict-origin-when-cross-origin policy, so I keep getting blocked. Access tokens and everything is already set up.
Using the guide for Instagram Basic Display API isn't exactly helpful, big surprise there.
main.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 or cors-anywhere would be helpful of course, but I want to do this properly... and I don't know how to implement CORS Header Proxy in Vue :)
from Vue 3 Instagram Feed - CORS
No comments:
Post a Comment