1

I have run into a strange situation in a Flutter Web application. I am making a request to a PHP script which appears to give me a CORS error, but it seems that the PHP code gets executed anyway...

When I make the request, the Flutter Web app throws an exception

XMLHttpRequest error

and the Chrome developer tools network tab shows CORS error in the status column for the request.

But despite this, it seems like the script is actually executed and inserting data into the database.

Is it possible that a PHP script can execute while still giving a CORS error on the client?

Magnus
  • 17,157
  • 19
  • 104
  • 189
  • This question is tagged as PHP, but it doesn't feature a single line of PHP code, therefore one can only assume what the script even does - or why it isn't capable of handling the headers. – Martin Zeitler May 28 '22 at 00:31

2 Answers2

0

You need to check the http method in your script before executing your code :

if ($_SERVER['REQUEST_METHOD'] === 'GET') {

}

The browser make a OPTIONS request to the server to check cors, which will execute your script, and if the cors check pass, your script will be called twice, one for the OPTIONS call, and another for the GET call

Lk77
  • 2,203
  • 1
  • 10
  • 15
  • This didn't work. When I tried logging the requests to a text file from the PHP script, only a single GET request is logged. So, the PHP file is executed with a GET request, but the client receives a `CORS error` in the Chrome devtools network tab, and a `XMLHttpRequest error` in the Flutter Web app... – Magnus May 27 '22 at 15:00
-1

So here is my understanding of what's happening.

  1. The web app makes a GET request to the server.

  2. Since the app is running in a browser, the browser handles the request for the app.

    2.1. The browser adds an Origin header to the request, with the value set to the current domain the web app is running on.

    2.2 The browser sends the request to the server.

  3. The server receives the request and relays it to the PHP script.

  4. The PHP script can decide wether to

    4.1 a) inspect the Origin request header and set an Access-Control-Allow-Origin response header that includes or excludes the Origin domain, or

    4.1 b) just execute normally without checking the Origin request header or setting the Access-Control-Allow-Origin response header.

    4.2 It's up to the PHP script do decide wether or not to execute, and wether or not to return any data.

  5. The PHP script has finished executing and the web server sends the response back to the client.

  6. The browser inspects the Access-Control-Allow-Origin header it got back from the PHP script.

    6.1 a) If it includes the Origin domain (or is a wildcard *), the browser relays back the contents of the response back to the app.

    6.1 b) Otherwise, the browser enforces the "same origin principle" and sends a "CORS error" back to the web app.

So I think my initial confusion was that the server wouldn't execute the request at all if the CORS headers weren't set. But what's actually happening is just that everything executes normally, the PHP script inserts some data into the database and sends a response, but when the browser detects that the response doesn't contain a CORS header that allows the Origin domain to read the response, it doesn't let the app see the response (even though the browser has already received it and it might contain a perfectly normal JSON/HTML/whatever).

The other answers talk about preflight OPTIONS requests, which do not seem to take place at all in this case. The Mozilla CORS documentation explains that "simple requests" don't trigger a CORS preflight.

Magnus
  • 17,157
  • 19
  • 104
  • 189