Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CORS request fails in Chrome only if has headers

I'm trying to send simple CORS request to external application server which uses session key for authorization.

$.ajax({
    type: "GET",
    url: "https://192.168.1.72:8442/api/file/",
    headers: {"Authorization": "3238562439e44fcab4036a24a1e6b0fb"}
});

It works fine in Firefox 18, Opera 12.12 and Rekonq 2.0 (uses also WebKit) but doesn't work in Google Chrome (tried versions 21 and 24). In Google Chrome it shows OPTIONS Resource failed to load in Network Inspector and application server doesn't get any request. I've tried jQuery 1.8.3 and 1.9.0.

Request URL:https://192.168.1.72:8442/api/file/
Request Headers
Access-Control-Request-Headers:accept, authorization, origin
Access-Control-Request-Method:GET
Cache-Control:no-cache
Origin:https://192.168.1.72:8480
Pragma:no-cache

If I remove headers from the request then I receive 401 also in Google Chrome and it's able to access the resource in case of authorization is disabled on application server. It doesn't matter which headers are sent. Only header I'm able to send is {"Content-Type": "plain/text"}. All other header names/values give an error in Google Chrome but work in all browsers I mentioned above.

Why Google Chrome doesn't handle headers in CORS request?

like image 689
Karmo Rosental Avatar asked Jan 24 '13 02:01

Karmo Rosental


People also ask

How do I fix CORS error on Chrome?

i. Turn OFF the CORS plugin, reload the app, at this time you should still get the errors which are correct. ii. Turn it back ON, reload the app, if the APIs are successful, stop here, no need to proceed to iii.

How do I resolve cross-origin issues in Chrome?

Simply activate the add-on and perform the request. CORS or Cross-Origin Resource Sharing is blocked in modern browsers by default (in JavaScript APIs). Installing this add-on will allow you to unblock this feature.

How do I fix CORS request did not succeed?

In many cases, it is caused by a browser plugin (e.g. an ad blocker or privacy protector) blocking the request. Other possible causes include: Trying to access an https resource that has an invalid certificate will cause this error.


2 Answers

It's a bug in Google Chrome: http://code.google.com/p/chromium/issues/detail?id=96007.

like image 97
Karmo Rosental Avatar answered Oct 08 '22 04:10

Karmo Rosental


I found that Access-Control-Allow-Headers: * should be set ONLY for "OPTIONS" request. If you return it for POST request then browser cancel the request (at least for chrome)

The following PHP code works for me

// Allow CORS
header("Access-Control-Allow-Origin: *");
header('Access-Control-Allow-Credentials: true');    
header("Access-Control-Allow-Methods: GET, POST, OPTIONS"); 

// Access-Control headers are received during OPTIONS requests
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
  header("Access-Control-Allow-Headers: *");
}

I found similar questions with some misleading response: - Server thread says that this is 2 years bug of chrome: Access-Control-Allow-Headers does not match with localhost. It's wrong: I can use CORS to my local server with Post normally - Access-Control-Allow-Headers does accept wildcards. It's also wrong, wildcard works for me (I tested only with Chrome)

This take me half day to figure out the issue.

Happy coding

like image 31
greensuisse Avatar answered Oct 08 '22 04:10

greensuisse