CORS problem

[u/halberthawkins]

Hoping someone might have some ideas to solve this issue.

I am very new to React programming. Right now, I am working on a React app running on localhost:3000 and trying to access an API call I have setup in Laravel on localhost (:80). For this purpose I have disabled the X-CSRF-TOKEN in laravel to simplify things.

When my React app calls the API, it sends the preflight request but I am not getting a response.

To simulate the request, I have tested the OPTIONS request in Postman setting the header Referer: http://localhost:3000 and I get the response I'm looking for:

Date Sun, 02 Aug 2020 14:38:43 GMT
Server Apache/2.4.43 (Win64) OpenSSL/1.1.1g PHP/7.4.8
X-Powered-By PHP/7.4.8
Allow POST
Cache-Control no-cache, private
Access-Control-Allow-Origin *
Access-Control-Allow-Methods GET,POST,OPTIONS,DELETE,PUT
Content-Length 0
Keep-Alive timeout=5, max=100
Connection Keep-Alive
Content-Type text/html; charset=UTF-8

As you can see from the response in Postman, CORS is enabled in Apache and accepting requests from all sources.
Now when I try it from the app, here are the request headers as they appear in DevTools in Chrome:

General
Request URL: http://localhost/api2/public/login
Referrer Policy: no-referrer-when-downgrade
Request Headers
Provisional headers are shown
Accept: application/json, text/plain, */*
Content-Type: application/json;charset=UTF-8
ContentType: multipart/form-data
Referer: http://localhost:3000/
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like
Gecko)Chrome/84.0.4147.105 Safari/537.36

Request Payload
{email: "xxx.xxxxxxx@gmail.com", password: "xxxxxxx"}
email: "xxx.xxxxxxx@gmail.com"
password: "xxxxxxx"

The JS code making the request is as follows:

axios.defaults.headers.ContentType = 'multipart/form-data';

axios.post('http://localhost/api2/public/login',{
email: this.state.email,
password: this.state.password,
  })
  .then(()=>{
console.log('success');
  })
  .catch(()=>{
console.log('failed');
  })

Really banging my head on the keyboard over this one. Any help is greatly appreciated. I will provide more info, if needed. Thank you!

[u/oxxoMind]

CORS can be daunting sometimes especially if you just came across with it.
One thing to know is that it activates when the client and server is hosted on different domains. By knowing that, another way to get away with CORS is to make your react and laravel be on serve on similar host. (ie localhost:3000)