Access-Control-Allow-Origin axios request error – CORS

Issue

I have a problem with CORS while sending POST request:

Here is my code:

import axios from 'axios'

const api = axios.create({
  baseURL: 'http://localhost:8084',
})


export const postTip = async (payload) => {
  try {
    const { data } = await api.post(`post-tip`, payload);
    return data;
  } catch (e) {
    return [];
  }
};

I have found that I need to set Access-Control-Allow-Origin in headers, and I did it in 2 ways. First one:

const api = axios.create({
  baseURL: 'http://localhost:8084',
  headers: {
    post: {
      "Access-Control-Allow-Origin": true
    }
  }
})

And the second one:

const { data } = await api.post(`post-tip`, payload, {
      headers: {
        "Access-Control-Allow-Origin": true
      }
    });

Both of them work and in request header I can see this line Access-Control-Allow-Origin: true. But I still get this error, so, what’s the problem?

Solution

This error from your backend, you use axios post from front-end, but you need to set header "Access-Control-Allow-Origin": true on your backend.

Answered By – Henry Xiloj Herrera

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published