axios.post вызывает ошибку CORS, тогда как GET работает нормально в React с использованием Laravel API

Question

Я пытаюсь создать сообщение, используя локальный REST API LARAVEL 5.7, используя приложение React.Я использую метод axios.post с crossOrigin: true.Я не понимаю, почему get работает, а почта не работает.Laravel api работает на локальном хосте на основе wamp, а приложение React работает на localhost: 3000 Мои действия / index.js выполняются следующим образом, а создатель соответствующего действия - addPost (): -

import axios from 'axios';
export const FETCH = 'FETCH_POSTS';
export const ADD = 'ADD_POST';
const URL = 'http://postsapi.test/api/v1';

export function fetchPosts(){
    const url = `${URL}/posts`;
    const request = axios.get(url, { crossDomain: true });
    //console.log(request);
    return{
        type: FETCH,
        payload: request
    }
    

}

export function addPost(post){
    const url = `${URL}/posts`;
    console.log(url);
   const  request = axios.post(url,post);
    //console.log(request);
    return{
        type: ADD,
        payload: request
    }
}

Это моментальный снимок из браузера, который отображается в предварительном запросе. Access-Control-Allo-Origin также установлен дважды

И в консоли я получаю эту проблему

Запрос перекрестного источника заблокирован: одна и та же политика происхождения запрещает чтение удаленного ресурса в http://postsapi.test/api/v1/posts. (причина: несколько заголовков CORS 'Access-Control-Allow-Origin 'не разрешен).

Answer 1

Это происходит потому, что сервер и клиент находятся в разных источниках.

Чтобы преодолеть это, вы должны включить Cross-Origin Resource Sharing на вашем сервере Laravel в качестве промежуточного программного обеспечения. Эта тема может вам помочь.