[Vuejs]-Vue 3 Instagram Feed – CORS

by

2👍

What you are trying to achieve is not possible as-is, and if it were, it would be considered a browser bug. CORS is meant to restrict resources that the browser will load via XMLHttpRequest (XHR).

You have two choices:

Proxy the request

As @Phil mentioned in their comment, you will need to proxy the request through some backend where CORS is ignored. Thus, the backend can make the request, fetch the results and return the results to your Vue app. The backend logic should be very simple and you can use axios there as well.
Note: This can be unsafe as you will need to forward the access token of the user to the backend.

Write a browser extension that adds in the access-control-allow-origin header

A browser extension has the ability to modify request and response headers. Writing an extension to do this is quite straightforward as well. You need a background script with content similar to this:

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

Leave a comment