browser extension - CORS proxy error using axios [duplicate] - vue.js

Question

This question already has answers here:
How does the 'Access-Control-Allow-Origin' header work?
(19 answers)
Closed 2 years ago.
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?

Answer 1

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.