How to fix CORS error in my axios request in nextjs app

Question

So I am getting this error when trying to make an axios call to my api on another localhost. How can I fix this. I am using Nextjs, ts and axios.

Here is the function (it is poorly written, just for testing in the meantime):

  const GetPartners = (e: { preventDefault: () => void; }) => {
      e.preventDefault();
      let token: string =
        "//This is normally correct just changed for question";
      axios
        .get(
          "http://localhost:7071/api/Partners",
          {
            headers: {
              Authorization: "Bearer " + token,
            },
          }
        )
        .then(res => console.log(res.data));
    } 
      return (
      <div className={styles.container}>
        <button onClick={GetPartners}>Get Partners</button>
      </div>
    );
  };
  
  export default Home;

and the error:

Access to XMLHttpRequest at 'http://localhost:7071/api/Partners' from origin 'http://localhost:3000' 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.

score 3 · Accepted Answer · answered Mar 17 '22 at 16:22

3

I ended up fixing it. I added this piece of code to my local.settings.json and it fixed it, hope someone finds this useful!

"Host": {
    "CORS": "*"
  }

answered Mar 17 '22 at 16:22

max14

133
1
2
10

1

i am facing the exact same problem in NextJS but you solution didn't work – Rezoanul Alam Riad Feb 13 '23 at 01:57
Where do I find this file? – Akshay I May 17 '23 at 11:48

score 1 · Answer 2 · answered Mar 17 '22 at 14:29

A CORS preflight request is a CORS request that checks to see if the CORS protocol is understood and a server is aware using specific methods and headers.

So in your case when you are making a request from localhost:3000 to localhost:7071 the origin is different so a preflight request is being made.

This request is getting failed because you might have not allowed accepting requests from different origins at the localhost:7071 server or we can say that you have not enabled CORS at this server.

If you are using NodeJS server and using ExpressJS middleware then you can easily enable CORS using CORS middleware. You just need to do below thing:

var express = require('express')
var cors = require('cors')
var app = express()

app.use(cors())

But beware of consequences of using CORS in the production environment, so you should either use it on dev mode only or at production cautiously.

score 0 · Answer 3 · answered Mar 17 '22 at 14:25

Do you have access to http://localhost:7071 ? if so, that application needs to set to either wildcard allow everything localhost * or Access-Control-Allow-Origin: http://localhost:3031 in the header.

This has nothing to do with your request but with the response from the host to allow your request.

If you do not have control of that application in this or another environment then using a proxy to rewrite maybe another option.

You can review the topic in more detail here

How to fix CORS error in my axios request in nextjs app

3 Answers3

Linked