Axios with VUE - Request header field content-encoding is not allowed by Access-Control-Allow-Headers in preflight response

Question

I'm trying to build a quick webapp for fun based on League of Legends API.

Some calls are working for some I'm getting

"Request header field content-encoding is not allowed by Access-Control-Allow-Headers in preflight response."

I read some similar questions, and I have tried every method to add headers but I can't get out.

What am I doing wrong?

 getLast10Games() {
  axios
    .get(
      "https://europe.api.riotgames.com/lol/match/v5/matches/by-puuid/" +
        this.puuid +
        "?start=0&count=10&api_key" +
        this.apiKey,
      {
        headers: {
          "Content-Type": "application/json;charset=utf-8",
          "Transfer-Encoding": "chunked",
          "Connection": "keep-alive",
          "Vary": "Accept-Encoding",
          "X-App-Rate-Limit": "20:1,100:120",
          "X-App-Rate-Limit-Count": "1:1,1:120",
          "X-Method-Rate-Limit": "500:10",
          "X-Method-Rate-Limit-Count": "1:10",
          "X-Riot-Edge-Trace-Id": "d31c72cb-7d79-4a8b-bf2c-56218c68a47f",
          "Content-Encoding": "gzip",
          "Access-Control-Allow-Origin": "*",
          "Access-Control-Allow-Methods":"GET, PUT, DELETE, POST, OPTIONS",
          "Access-Control-Allow-Headers":
          "DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range",
          "Access-Control-Expose-Headers": "Content-Length,Content-Range",
        },
      }
    )
    .then((response) => {
      console.log(response.data);
    })
    .catch((error) => {
      console.log(error);
    });
},

Matt Schlosser · Accepted Answer · 2022-04-09 17:57:31Z

1

You don't need to add the headers to your axios request. While some of them can be used to tell the seever certain hints about your request, most of these are only used as Response Headers, meaning headers that would be returned by the server. Try removing the entire headers object and making your request again.

answered Apr 9, 2022 at 17:57

Matt Schlosser

1,0547 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Uxe Over a year ago

Hello, even without any headers i'm getting CORS error :(

Matt Schlosser Over a year ago

Your API key may need to be configured to allow the hostname of your site. Check with Riot Games for an option to add an allowed hostname to your API key

Collectives™ on Stack Overflow

Axios with VUE - Request header field content-encoding is not allowed by Access-Control-Allow-Headers in preflight response

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related