Status code 415 although headers all seem to be correct

Question

I have an API call on my front end application that uses Axios to make a PUT request. This works from postman but in the browser I get the 415 error. Here are the browser headers:

General
Request URL: api.example.com/foo
Request Method: OPTIONS
Status Code: 415 Unsupported Media Type
Remote Address: ip.address:443
Referrer Policy: no-referrer-when-downgrade

Response Headers
Access-Control-Allow-Headers: content-type
Access-Control-Allow-Methods: GET, PUT, POST, DELETE, HEAD, OPTIONS
Access-Control-Allow-Origin: *
Content-Length: 175
Content-Type: application/problem+json; charset=utf-8
Date: Mon, 13 Jan 2020 20:03:06 GMT
Request-Context: appId=guid
Server: Microsoft-IIS/10.0
Strict-Transport-Security: max-age=2592000
X-Powered-By: ASP.NET

Request Headers
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Access-Control-Request-Headers: content-type
Access-Control-Request-Method: PUT
Cache-Control: no-cache
Connection: keep-alive
Host: api.example.com
Origin: http://localhost:3000
Pragma: no-cache
Referer: http://localhost:3000/extension
Sec-Fetch-Mode: cors
Sec-Fetch-Site: cross-site
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.117 Safari/537.36

My request looks like this:

const url = 'https://api.example.com/foo';
const headers =  {
  'Content-Type': 'application/json; charset=UTF-8'
  };
const data = JSON.stringify([{"name": "SomeName","date": "2020-01-30T14:50:56.636Z"}]);

axios.put(
  url,
  data,
  {headers: headers}
  )
  .then(res => {
      console.log(res);
  })
  .catch((e) => {
      console.log(e);
  });

My API is a .net core application. Thank you friends!

It's a content type for researching errors on client side - symfonycasts.com/screencast/rest/… — Anand
What kind of setup do you have in the ASP.NET Core for CORS? Are you using the CORS middleware, setting those headers manually, etc? — Kirk Larkin
I'm not but shouldn't the response headers above tell us what is missing regarding the error? — Anand

Anand Anand · Accepted Answer · 2020-01-15T16:04:30

I figured out the problem; in the API, the options handlers had some parameters (since I copy pasta'd the PUT request for options) and the browser wasn't sending the parameters in the preflight check, so I was getting 415. Once I removed the parameters, it worked fine!

Status code 415 although headers all seem to be correct

1 Answers