Is it safe to bypass OPTIONS while sending POST request to avoid CORS error?

Question

I'm sending a POST to the Request URL and getting this in the Headers.

Request URL: Request URL: https://www.host.com/path/file.php/api
Request Method: OPTIONS
Status Code: 200 OK
Remote Address: AA.BB.CC.DD:443
Referrer Policy: no-referrer-when-downgrade
Access-Control-Allow-Origin: *
Cache-Control: no-store, no-cache, must-revalidate
Connection: Keep-Alive
Content-Length: 3
Content-Type: text/html; charset=UTF-8
Date: Fri, 29 Nov 2019 09:54:10 GMT
Expires: Thu, 19 Nov 1981 08:52:00 GMT
Keep-Alive: timeout=5, max=100
Pragma: no-cache
Server: Apache/2.4.7 (Ubuntu)
Set-Cookie: PHPSESSID=eik5ssn2jc0514i2mu1943quk1; path=/
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Access-Control-Request-Headers: content-type
Access-Control-Request-Method: POST
Cache-Control: no-cache
Connection: keep-alive
Host: www.host.com
Origin: https://origin.com
Pragma: no-cache
Referer: https://origin.com/form
Sec-Fetch-Mode: cors
Sec-Fetch-Site: cross-site
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.97 Safari/537.36

This is the CORS error I'm facing:

Access to XMLHttpRequest at 'https://www.host.com/path/api' from origin 'https://origin.com' has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.
core.js:6014 ERROR HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: "https://www.host.com/path/api", ok: false, …}

We are using Angular and they are using PHP in the backend. Now, the backend team (another city, another developer team) is saying that we shouldn't send request method as OPTIONS but directly as POST.

What could be the possible scenario here? I'm trying to figure out how to bypass OPTIONS. Isn't this a backend issue that needs to be fixed from their end?

PS: We are successful in sending a GET Request.

score 0 · Answer 1 · answered Nov 30 '19 at 00:18

The error message is telling you that Accept: text/html is not allowed as part of CORS (as configured). There's a good summary of the suggested headers in this stack overflow answer.

Your browser first makes an OPTIONS call to the remote server, and then uses the CORS headers in the response to determine the allowed HTTP requests. This is called the Preflight request. You cannot control this request being made.

The CORS response from the server should include the header:

Access-Control-Allow-Headers: Content-Type, etc...`

Importantly (it's not clear from your HTTP trace the distinction between request and response), the web server needs to respond with this header - placing it in your HTTP request will do nothing.

One way to debug this is to: - right click on the specific request in the Chrome dev tools networking tab and copy as cURL - Open Postman (and install it if you haven't already :) ) and import; past your copied cURL "as raw text" and Postman will import the HTTP request. - You can then play around with headers (and write tests to ensure CORS headers are correct) while you debug things. Don't get confused; Postman won't do CORS pre-flight so you need to manually assemble such a request.

Is it safe to bypass OPTIONS while sending POST request to avoid CORS error?

1 Answers1