Каков наилучший способ включить CORS в приложении React?

Question

Существуют различные способы сделать вызов REST в реакции - например,

 axios.post('link', JSON.stringify(data1),
          {
              headers: {"content-type" : "application/json", "Access-Control-Allow-Origin" : "*"}})
          .then(response => {
              console.log("res:", response)
          })
          .catch(err =>{
              console.log(err)
          })
        }

ИЛИ

 fetch('http://localhost:8080/feedbacks/addfeedback', {
               method: 'post',
               headers: {
                   'Content-Type': 'application/json',
                   'Access-Control-Allow-Origin' : '*'
               },
               body:body

Какой самый эффективный способ включить CORS,Есть ли другой способ, которым я могу сделать это во внешнем интерфейсе или в бэкэнде?

Answer 1

Это зависит от того, какую HTTP-библиотеку вы используете.

См. В чем разница между Axios и Fetch? .

Обычно я использую Axios, затем я делаюсоздает глобальный экземпляр и настраивает Axios один раз.

export const api = axios.create({
    baseURL: '_URL_',
    timeout: 1000,
    withCredentials: false,
    responseType: 'json',
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
        'Access-Control-Allow-Origin': '*' // whatever you want
    }
});

// You can add common headers later
api.defaults.headers.common['Authorization'] = `Bearer ${token}`;

Также я включаю CORS в моем приложении на стороне сервера.

Спасибо @ henrik123 за хорошее объяснение:

Браузер увидит, что какой-то Javascript-запрос пытался инициировать запрос к другому домену, субдомену или порту, чем тот, на котором сейчас работают браузеры.Если что-то из этого отличается, запускается CORS. Не имеет значения, используете ли вы Axios, Fetch или любую другую библиотеку