Error :Request header field Content-Type is not allowed by Access-Control-Allow-Headers

As hinted at by this post Error in chrome: Content-Type is not allowed by Access-Control-Allow-Headers just add the additional header to your web.config like so...

<httpProtocol>  <customHeaders>    <add name="Access-Control-Allow-Origin" value="*" />    <add name="Access-Control-Allow-Headers" value="Origin, X-Requested-With, Content-Type, Accept" />  </customHeaders></httpProtocol>

It is most likely due to a cross-origin request, but it may not be. For me, I had been debugging an API and had set the Access-Control-Allow-Origin to *, but it appears that recent versions of Chrome are requiring an extra header. Try prepending the following to your file if you are using PHP:

header("Access-Control-Allow-Origin: *");header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");

Make sure that you haven't already used header in another file, or you will get a nasty error. See the docs for more.

I know it's an old thread I worked with above answer and had to add:

header('Access-Control-Allow-Methods: GET, POST, PUT');

So my header looks like:

header('Access-Control-Allow-Origin: *');header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");header('Access-Control-Allow-Methods: GET, POST, PUT');

And the problem was fixed.