treflehq / trefle-api

🍀 Trefle is a botanical JSON REST API for plants species, allowing you to search and query over all the registered species, and build the next gardening apps and farming robots.
https://trefle.io
GNU Affero General Public License v3.0
485 stars 51 forks source link

Browser pre-flight request (OPTIONS) does not provide a valid response, breaking client-side API requests #27

Closed ducsuus closed 4 years ago

ducsuus commented 4 years ago

Describe the bug When a browser issues a CORS pre-flight request (using the OPTIONS HTTP method), all endpoints return a HTTP 404 status code and do not provide information on the allowed CORS methods.

When a website attempts to request a resource from a difference resource (ie a website using the Trefle.io API), the browser will send a pre-flight request using the OPTIONS HTTP method. This method returns information on the CORS policy of the specified resource.

As the Trefle.io API does not return a valid OPTIONS response, the browser assumes that the CORS policy does not allow the specified request and throws an error.

To Reproduce

Using Curl Make a request to any API endpoint using the HTTP OPTIONS request:

curl --location --request OPTIONS 'https://trefle.io/api/kingdoms' --header 'Access-Control-Request-Method: OPTIONS ' --header 'Access-Control-Request-Headers: origin, x-requested-with' --header 'Origin: https://example.com'

This request will return a status code 404 with the content:

Page not found

Using the browser

Alternatively the browser can be used to simulate this functionality by executing the following JavaScript in the browser:

let request = new XMLHttpRequest(); request.addEventListener("load", console.log); request.addEventListener("error", console.log); request.open("GET", "http://trefle.io/api/plants?page_size=3?cachebust=998"); request.setRequestHeader("Authorization", "<REDACTED>") request.send();

This will result in the browser issuing a similar error message (tested in Safari 13.1):

Preflight response is not successful

Expected behaviour When the OPTIONS HTTP method is requested on a given resource, the resource should respond with status code 204 and the standard CORS response headers. For example:

HTTP/1.1 204 No Content Connection: keep-alive Access-Control-Allow-Origin: https://foo.bar.org Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE Access-Control-Max-Age: 86400

Additional context

More information on the pre-flight request can be found here: https://developer.mozilla.org/en-US/docs/Glossary/Preflight_request

The pre-flight (OPTIONS) request may need to take into account the API key in order to issue the correct Access-Control-Allow-Origin header. Alternatively, providing a wildcard response ("*") and issuing a separate Access-Control-Allow-Origin (and an error, if necessary) when an API key is used would also function but allow more requests than necessary to be made.

SaulHarwin commented 4 years ago

Is this fixed. I'am having the same issue. Could you get this fixed please.

lambda2 commented 4 years ago

Hey! I'll look into it

lambda2 commented 4 years ago

Should be fixed now, thanks for the feedback and the detailed issue 👍