Develop Reference

CI and Angular4 : Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response

i have load all of these on my backend (CI) and i placed it on the construct :
header("Access-Control-Allow-Origin: *");
header('Access-Control-Allow-Methods: POST, GET, PUT, DELETE, OPTIONS');
$method = $_SERVER['REQUEST_METHOD'];
if($method == "OPTIONS") {
die();
}
but i still have this error :
Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.
is this problem come from the backend (CI) or my front-end (Angular4) ?

You will need to add the Access-Control-Allow-Headers header in the response from backend just like you have done for request

Try use Chrome Extension CORS.
https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?utm_source=chrome-app-launcher-info-dialog

XMLHttpRequest cannot load http://example.com/test.php. No 'Access-Control-Allow-Origin

XMLHttpRequest cannot load http://example.com/test.php. No Access-Control-Allow-Origin header is present on the requested resource. Origin http://eample.com is therefore not allowed access.
How to resolve it. i added following headers in that php file:
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, OPTIONS');
header('Access-Control-Allow-Headers: Origin, Content-Type, Accept,
Authorization, X-Request-With');
header('Access-Control-Allow-Credentials: true');
i replace my domain name 'codeXXX' with 'example' dont confuse with that

The header
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST');
MUST be given in response to an OPTION request to "http://example.com/test.php". If OPTION request contains this header, the following GET (or POST) will be accepted.
If the browser says that the header "Access-Control-Allow-Origin" is not present, ... just add it ^_^
header('Access-Control-Allow-Headers: Access-Control-Allow-Origin, Origin, Content-Type, Accept, Authorization, X-Request-With');

Set response header and request header for cross domain file upload

I'm trying to upload a file from localhost:8888 to www.base.com . When the upload starts I have this error
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote
resource at http://base.com/public_upload. (Reason: missing token 'x-file-name'
in CORS header 'Access-Control-Allow-Headers' from CORS preflight channel).
Here are the header responses from php server that I set
header('Access-Control-Allow-Origin: http://localhost:8888');
header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE");
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");
And here is the request header in upload script which runs in browser hosted by localhost:8888
xhr.setRequestHeader("Content-Type", "multipart/form-data");
xhr.setRequestHeader("X-File-Name", unescape(encodeURIComponent(file.name)));
xhr.setRequestHeader("X-File-Size", file.size);
xhr.setRequestHeader("X-File-Type", file.type);
What headers I've could mis-configed to create such error message?

You have to add X-File-Name, X-File-Size and X-File-Type to the list of headers:
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, X-File-Name, X-File-Size, X-File-Type");
Removing the Access-Control-Allow-Headers header should work too.

Enable CORS if the server http status is something other than 200

I enabled CORS on server side using:
Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type"
Header add Access-Control-Allow-Methods "GET, POST, OPTIONS"
I send a post message using angular $http.post() to server and everything is working good. But if the server is sending 403 header, preflight fails.
header("HTTP/1.1 403 Not allowed");
Whatever I send the same result occurs. Even if I send http status 200.
Cross-Origin Request Blocked:
The Same Origin Policy disallows reading the remote resource at http://api.server.com/.
(Reason: CORS preflight channel did not succeed).

For pre-flight to succeed, an OPTIONS call to the URL must return 200 along with the CORS headers.
The follow up POST (or whatever) can return other status codes, but the OPTIONS request must succeed.

Header always add Access-Control-Allow-Origin "*"
Header always add Access-Control-Allow-Headers "origin, x-requested-with, content-type"
Header always add Access-Control-Allow-Methods "GET, POST, OPTIONS"
Pay attention to the always.
For more information, see Apache doc

XmlHttpRequest getAllResponseHeaders() not returning all the headers

I'm trying to get the response headers from an ajax request but jQuery's getAllResponseHeaders xhr method only displays the "Content-Type" header. Anyone know why?
This is the response header
Access-Control-Allow-Credentials:true
Access-Control-Allow-Headers:If-Modified-Since, Cache-Control, Content-Type, Keep-Alive, X-Requested-With, Authorization
Access-Control-Allow-Methods:GET, PUT, POST, DELETE, OPTIONS
Access-Control-Allow-Origin:*
Access-Control-Max-Age:1728000
Authorization:apikey="apikey1" AuthenticationToken="62364GJHGJHG"
Connection:keep-alive
Content-Length:240
Content-Type:application/json; charset=utf-8
X-Powered-By:Express
This is the success function
params.success = function (response, textStatus, jqXHR) {
console.log(jqXHR.getAllResponseHeaders())
}
This is what it logs...
Content-Type: application/json; charset=utf-8

Just ran into this. It's because you're doing a CORS request and you're not exposing the Location header.
You need to add a Access-Control-Expose-Headers to your preflight CORS response in Express:
res.header('Access-Control-Expose-Headers', 'Content-Type, Location');
res.send(200);
That will solve the issue.

according to the following
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Expose-Headers
The Access-Control-Expose-Headers response header indicates which headers can be exposed as part of the response by listing their names.
By default, only the 7 CORS-safelisted response headers are exposed:
Cache-Control
Content-Language
Content-Length
Content-Type
Expires
Last-Modified
Pragma
So this will work perfectly for all headers to be accessible and exposed
res.header('Access-Control-Expose-Headers', '*');