-1

I'm trying to get data from an end-point using VueJS and axios, but I keep getting the following CORS error on this code.

  axios
    .get(url, {
      headers: {
        "Access-Control-Allow-Origin": "*",
      },
    })
    .then((response) => {
      this.data = response.data;
    });

Access to XMLHttpRequest at [url] from origin 'http://localhost:8081' 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.

I've looked at multiple answers but the only solutions I'm seeing are using a Chrome extension or changing the server's configuration, which I do not have access to. Is there any way to solve this exclusively through the front-end?

helphp
  • 1
  • 1
    You are setting the `Access-Control-Allow-Origin` header on the client. It needs to be set on the server you are connecting to. – Simon K Jul 16 '21 at 18:03
  • If you cannot access the server in any way the only way (I think) would be to have your frontend proxy the server to a local path on your frontend's hostname (e.g. localhot:8081 will be proxied to localhost:8080/server or similar). In case you are using webpack, this is supported out of the box. – m90 Jul 16 '21 at 18:05

1 Answers1

-1

You could use a CORS proxy, like CORS anywhere:

  axios
    .get("https://cors-anywhere.herokuapp.com/" + url)
    .then((response) => {
      this.data = response.data;
    });

However, this is not a good solution for production, as it relies on an external service to handle your requests, which could lead to issues later down the line.

Frued Dued
  • 1
  • 1