title: Vue 3 Instagram Feed - CORS
body: <p>I'm trying to fetch the latest Instagram posts from a feed using Vue 3 and Axios. Instagram has introduced a <code>strict-origin-when-cross-origin</code> policy, so I keep getting blocked. Access tokens and everything is already set up.</p>
  <p>Using the guide for <a href="https://developers.facebook.com/docs/instagram-basic-display-api/guides/getting-profiles-and-media" rel="nofollow noreferrer">Instagram Basic Display API</a> isn't exactly helpful, big surprise there.</p>
  <p><strong>main.js</strong></p>
  <pre class="lang-js prettyprint-override"><code>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')
  </code></pre>
  <p><strong>App.vue</strong></p>
  <pre class="lang-js prettyprint-override"><code>&lt;template&gt;
      &lt;Home /&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import { inject } from 'vue'
  import Home from './components/Home.vue'
  
  export default {
      name: 'App',
      components: { Home },
      setup() {
          inject('axios')
      }
  }
  &lt;/script&gt;
  </code></pre>
  <p><strong>Home.vue</strong></p>
  <pre class="lang-js prettyprint-override"><code>export default {
      name: 'Home',
      mounted() {
          axios.get('https://api.instagram.com/me?fields=id&amp;access_token=myToken')
          .then(response =&gt; {
              console.dir(response)
          }).catch(err =&gt; {
              console.error(err)
          })
      }
  }
  &lt;/script&gt;
  </code></pre>
  <pre><code>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.
  </code></pre>
  <p><a href="https://developers.cloudflare.com/workers/examples/cors-header-proxy" rel="nofollow noreferrer">CORS Header Proxy</a> or <code>cors-anywhere</code> 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 :)</p>