Saturday, 9 October 2021

Vue 3 Instagram Feed - CORS

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