[Vuejs]-Browser extension – CORS proxy error using axios

by

2👍

✅

In your code example, you are attempting to send the CORS headers from the client to the server.

It needs to be the other way around.

The client needs to respond to your request with the 'Access-Control-Allow-Origin': '*' header for this to work.

Can your check, using Chrome Dev tools network tab, that the server is returning the correct access control headers from the GimmeProxy API.

Edit: Upon further inspection, I don’t seem to see an access control header on this API endpoint.

What you’ll need to do in that case, is set up your own API endpoint as a middleman:

  1. Set up an Express API on a VPS (or alternatively an AWS lambda function).
  2. Create an endpoint that makes a request to gimmeproxy.
  3. Your Chrome extension makes a request to this endpoint via Axios.
  4. The endpoint makes a request to the gimmeproxy API via Axios (it is not a browser, so no cross origin policies are enforced).
  5. Your API returns the response to the client.

It is important to note, that your Express API must return the header 'Access-Control-Allow-Origin': '*' or have an origin matching that of your extension.

Leave a comment