browser extension - CORS proxy error using axios

Question

I'm using GimmeProxy api to get a proxy that I want to use in my vue chrome extension. Unfortunately I get this error:

Access to XMLHttpRequest at 'https://gimmeproxy.com/api/getProxy?get=true&supportsHttps=true&anonimityLevel=1&protocol=http' from origin 'chrome-extension://eamofepokjbdhndoegnmcnmgjhefhhlh' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

This is the code I have in my vuex action:

    fetchProxyData({ commit }) {
      axios({
        method: 'get',
        baseURL: 'https://gimmeproxy.com/api/getProxy',
        params: {
          get: true,
          supportsHttps: true,
          anonimityLevel: 1,
          protocol: 'http'
        },
        headers: {
          'Access-Control-Allow-Origin': '*'
        }
      }).then( (response) => {
        console.log(response)
      })

Is there a way to fix this?

Jordan · Accepted Answer · 2020-08-25T22:07:46.173

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:

Set up an Express API on a VPS (or alternatively an AWS lambda function).
Create an endpoint that makes a request to gimmeproxy.
Your Chrome extension makes a request to this endpoint via Axios.
The endpoint makes a request to the gimmeproxy API via Axios (it is not a browser, so no cross origin policies are enforced).
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.

edited Aug 25 '20 at 22:07

answered Aug 25 '20 at 16:14

Jordan

2,245
6
19

I'm using the free api so there are no credentials to set, but I will follow your suggestion. I've added the `'Access-Control-Allow-Origin': '*'` header to try solving the problem but without success. Thanks for the help – nukiko12 Aug 25 '20 at 16:32
Adding the access control header to your own request will do nothing. It is the server that needs to send it not the client (you). Try adding the "withCredentials" option to Axios and tell me if that resolves the issue :) – Jordan Aug 25 '20 at 16:33
With the `withCredentials: true` I get this error: `Access to XMLHttpRequest at 'https://api.getproxylist.com/proxy?get=true&supportsHttps=true&anonimityLevel=1&protocol=http' from origin 'chrome-extension://eamofepokjbdhndoegnmcnmgjhefhhlh' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.` – nukiko12 Aug 25 '20 at 16:49
the response header of the server is set to `Access-Control-Allow-Origin: *` – nukiko12 Aug 25 '20 at 16:50
See my updated answer for a fix – Jordan Aug 25 '20 at 20:16
I'm working on a browser extension so I don't have a server that I can use as a middleware to pass the request without the CORS problem occur. No way to get this working – nukiko12 Aug 25 '20 at 21:30
You need to host your own sever separately. The same way you're making a request to gimmeproxy with axios in your extension is the same way you'd make your request with your own API. That API then requests to gimmeproxy the same way – Jordan Aug 25 '20 at 21:53
I have further clarified the steps required :) – Jordan Aug 25 '20 at 22:08
I've read it, but as I wrote, I'm working on a browser extension so I don't have any server to use nor can run my own, I will rely on another free proxy service, anyway thanks for the help! – nukiko12 Aug 25 '20 at 22:23
Yeah, my point is you would need to set up and run your own alongside the extension. Is there any reason why you can't set up your own? Simply use digitalocean for an easy-to-set-up VPS. :) – Jordan Aug 25 '20 at 22:24
It's a small and free project, the cost for the vpn will not be repaid from users usage of the extension, so it's better to usa a free solution that will have no cost in long time :) – nukiko12 Aug 25 '20 at 22:27
1

That's unfortunate. Sorry I couldn't be of more help. I hope at least my answer helps someone who may encounter a similar limitation :) – Jordan Aug 25 '20 at 22:29

browser extension - CORS proxy error using axios

1 Answers1