-1

I'm trying to use axios to make a post request to my backend. Every time I make the request I was receiving this error:

origin 'http://localhost:1234' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

So I added the appropriate header:

const FRONTEND_URL = 'http://localhost:1234'

export async function connect( address:string | undefined, signature:string | undefined ) {
        const url = `${SERVER_URL}/connect`;
        return await axios.post(
          url,
          { address, signature },
          {
            headers: {
              'Access-Control-Allow-Headers': '*',
              'Access-Control-Allow-Origin': `${FRONTEND_URL}`,
              'content-type': 'application/json',
    
            },
          }
        );
      }

I still get the same error. Why isn't it detecting my Access-Control-Allow-Origin header? (I've restarted servers multiple times)

https://masteringjs.io/tutorials/axios/post-headers

j08691
  • 204,283
  • 31
  • 260
  • 272
A B C
  • 9
  • 1
  • 1
  • 2
  • 2
    The CORS headers need to be set as **response** headers, at the server. – Pointy Feb 04 '22 at 17:21
  • 1
    In addition to @Pointy's comment, see https://stackoverflow.com/a/71000016/2541573. I believe the cause of the problem and its solution are the same as in your case. – jub0bs Feb 05 '22 at 16:53

1 Answers1

-2

Since you are running the routes in development at it means using various ports you are running into error due to CORS policy. You may look up to these answers as they are provided already with so much explanation enable cors.

Also, you may look at documentation of CORS package CORS

Satya Prakash Satyam
  • 17
  • 4