axios.post gives CORS issue whereas GET is working fine in React using Laravel API

Question

I am trying to create a post using LARAVEL 5.7 local REST api using a React app. I am using axios.post method with crossOrigin:true . I do not understand why get is working and post is not working. Laravel api is on wamp based localhost and React app is running at localhost:3000 My actions/index.js is as follows and the relevant action creator is 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
    }
}

This is the snap shot from browser that shows in preflighted request Access-Control-Allo-Origin is set twice as well

And in console I am getting this issue

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://postsapi.test/api/v1/posts. (Reason: Multiple CORS header ‘Access-Control-Allow-Origin’ not allowed).

Muljayan Muljayan · Accepted Answer · 2019-01-02T12:20:22

This happens because the server and client is on different origins.

To overcome this you have to enable Cross-Origin Resource Sharing in your Laravel server as a middleware. This thread might help you.

axios.post gives CORS issue whereas GET is working fine in React using Laravel API

1 Answers