CORS error - my headers

Question

I have attempted to do my homework before asking this question but I cannot see what is missing in my headers.

I set the following headers in the javascript:

xhr.setRequestHeader('Access-Control-Allow-Headers', 'Origin, Accept, Content-Type, Access-Control-Allow-Origin');
xhr.setRequestHeader('Access-Control-Allow-Origin', '*');
xhr.setRequestHeader('Access-Control-Allow-Methods', 'GET,POST');
xhr.setRequestHeader('Content-Type', 'application/json');

The server sends the headers with the response:

Pragma: no-cache
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: PUT, GET, POST, OPTIONS
Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept
Access-Control-Max-Age: 86400
Transfer-Encoding: chunked
Cache-Control: no-store, must-revalidate, no-cache, post-check=0, pre-check=0
Date: Wed, 15 Mar 2017 03:39:49 GMT
Set-Cookie: PHPSESSID=1ng3l10lvrrovlmdbij5chv2f5; path=/
Server: Apache
Content-Type: application/json
Expires: Thu, 19 Nov 1981 08:52:00 GMT

Yet I get the error in my browsers(FF & Chrome):

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://api.mydomain.com/login. (Reason: missing token ‘access-control-allow-headers’ in CORS header ‘Access-Control-Allow-Headers’ from CORS preflight channel).

Can anyone see what I am missing?

`Access-Control-Allow-*` headers make **no sense** on the client - they are headers the **server** must respond with for your client to get permission to use someone else's resources - remove the `Access-Control-Allow-*` in the request, because your server seems to be OK, it's just that the server is not allowing those incorrect headers in the request — Jaromanda X, Mar 15 '17 at 04:08
the problem is quite clearly spelled out n the error message by the way ... `Reason: missing token ‘access-control-allow-headers’ in CORS header ‘Access-Control-Allow-Headers’ from CORS preflight channel` - so, just get rid of the nonsensical request headers (the first 3) — Jaromanda X, Mar 15 '17 at 04:13
Especially get rid of this one Access-Control-Allow-Origin: *. It allows everything and everyone — Brad, Mar 15 '17 at 17:27

score 2 · Answer 1 · edited Jun 22 '17 at 15:29

This solution seems to work well.

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

    if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD']) && $_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD'] == 'POST') {
        header('Access-Control-Allow-Origin: *');
        header('Access-Control-Allow-Headers: X-Requested-With, content-type, access-control-allow-origin, access-control-allow-methods, access-control-allow-headers');
    }
    exit;
}

header('Content-type: application/json');
header('Access-Control-Allow-Origin: *');

Javascript:

xhttp.setRequestHeader("Content-Type", "application/json; charset=UTF-8");
xhttp.setRequestHeader("Access-Control-Allow-Origin", "*");
xhttp.setRequestHeader("Access-Control-Allow-Methods", "GET, POST, PUT, OPTIONS");
xhttp.setRequestHeader("Access-Control-Allow-Headers", "Content-Type");
xhttp.setRequestHeader("Access-Control-Request-Headers", "X-Requested-With, accept, content-type");

Hello Pigfox, I saw you are good with cross domain subject hehe, could you take a look on my question? https://stackoverflow.com/questions/71314302/cross-domain-access-include-files-remote-server — Sophie, Mar 02 '22 at 09:30

CORS error - my headers

1 Answers1

Linked