Can't send a post request when the 'Content-Type' is set to 'application/json'

It turns out that CORS only allows some specific content types.

The only allowed values for the Content-Type header are:

• application/x-www-form-urlencoded
• multipart/form-data
• text/plain

Source: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

To set the content type to be 'application/json', I had to set a custom content type header in the API. Just removed the last header and added this one:

->header('Access-Control-Allow-Headers', 'Content-Type');

and it is working all good.

You are violating the 'Same Origin Policy'. A website www.example.com may never be able to load resources from any website www.example.net other than from itself.

During development however, sometimes one needs to be able to do that. To bypass this:

1. either move your origin to http://local.moberries.com,
2. or move the api (which you are accessing) to your localhost.
3. Other than that, there are ways to temporarily turn off restrictions of these kinds in some browsers (esp. Chrome), methods of which usually require more and more effort in the subsequent updates of the browser. Search Google about how to turn on Cross-Origin Resource Sharing in your version of the browser.
4. Or, as the error prompt suggests, introduce a header allowing requests to be entertained from non-origins. More information is in the documentation for Access Control CORS