I'm trying to send files to my server with a post request, but when it sends it causes the error:

Request header field Content-Type is not allowed by Access-Control-Allow-Headers.

So I googled the error and added the headers:

$http.post($rootScope.URL, {params: arguments}, {headers: {

"Access-Control-Allow-Origin" : "*",

"Access-Control-Allow-Methods" : "GET,POST,PUT,DELETE,OPTIONS",

"Access-Control-Allow-Headers": "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With"

}

Then I get the error:

Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers

So I googled that and the only similar question I could find was provided a half answer then closed as off topic. What headers am I supposed to add/remove?

javascript angularjs post header

shareimprove this question

edited May 24 '17 at 12:46

Emile Bergeron

9,65843663

asked Sep 8 '14 at 15:03

user3194367

8593810

add a comment

12 Answers

active oldest votes

up vote

127

down vote

accepted

The server (that the POST request is sent to) needs to include the Access-Control-Allow-Headers header (etc) in its response. Putting them in your request from the client has no effect.

This is because it is up to the server to specify that it accepts cross-origin requests (and that it permits the Content-Type request header, and so on) – the client cannot decide for itself that a given server should allow CORS.

shareimprove this answer

answered Sep 8 '14 at 15:08

Shai

5,00821121

4

How do I set the headers in the backend? – user3194367 Sep 8 '14 at 15:12

8

@user3194367: Depends on your backend. – Felix Kling Sep 8 '14 at 15:20

8

I guess I'll have to talk to my server guy. – user3194367 Sep 8 '14 at 15:35

2

response.addHeader("Access-Control-Allow-Headers", "yourKey"); – Mayuresh Jul 20 '16 at 7:35

1

@Mayuresh yourKey is what? Content-Type? – zhuguowei Sep 13 '16 at 7:57

show 6 more comments

up vote

161

down vote

I had the same problem. In the jQuery documentation I found:

For cross-domain requests, setting the content type to anything other than application/x-www-form-urlencoded, multipart/form-data, or text/plain will trigger the browser to send a preflight OPTIONS request to the server.

So though the server allows cross origin request but does not allow Access-Control-Allow-Headers , it will throw errors. By default angular content type is application/json, which is trying to send a OPTION request. Try to overwrite angular default header or allow Access-Control-Allow-Headers in server end. Here is an angular sample:

$http.post(url, data, {

headers : {

'Content-Type' : 'application/x-www-form-urlencoded; charset=UTF-8'

}

});

shareimprove this answer

edited Sep 12 '17 at 11:02

answered May 31 '15 at 6:01

Fisherman

3,04811530

20

This should be an accepted answer, much more informative than the other one! – Mike Szyndel Mar 24 '16 at 21:15

I would like multipart/form-data because I want to uplaod something – Vlado Pandžić Apr 6 '16 at 10:38

and how to allow it in the server, for example using PHP? what header? – azerafati May 26 '16 at 8:44

1

or allow Access-Control-Allow-Headers in server end how? – Omar Mar 27 at 22:31

1

@omar it depends on what server platform you using. if java there is example on other answers if php then there is a function name header to set header of the response – Fisherman Mar 28 at 4:57

show 3 more comments

up vote

36

down vote

If that helps anyone, even this kind of poor as we must only allow this for dev purpose, here is a Java solution as I encountered the same issue. [Edit] Do not use the wild card * as it is a bad solution, use localhost if you really need to have something that works locally.

public class SimpleCORSFilter implements Filter {

public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {

HttpServletResponse response = (HttpServletResponse) res;

response.setHeader("Access-Control-Allow-Origin", "my-authorized-proxy-or-domain");

response.setHeader("Access-Control-Allow-Methods", "POST, GET");

response.setHeader("Access-Control-Max-Age", "3600");

response.setHeader("Access-Control-Allow-Headers", "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");

chain.doFilter(req, res);

}

public void init(FilterConfig filterConfig) {}

public void destroy() {}

}

shareimprove this answer

edited Feb 27 at 22:41

answered Nov 25 '15 at 3:05

lekant

665611

As witnessed by multiple answers for Access-Control-Request-Headers, there are clearly differences due to different environments. What worked for me was to get access to the request object and dump the values for the headers, but specifically the header value for "Access-Control-Request-Headers". Then, copy/paste this into your response.setHeader("Access-Control-Allow-Headers", "{paste here}"); I am also using Java, but I required additional values and some mentioned in this answer I didn't need. – Outfast Source Oct 4 '16 at 13:53

This was a partial (and as said, poor) solution to help people and share clues one year back. I dont see the point of down voting, but well this is your liberty. The idea is to allow the headers on the server side so when an OPTION request is posted, the client / the browser knows which headers are allowed. I acknowledge there is a bit of confusion, my CORS filter has changed a lot since then. As a better practice, Access-Control-Allow-Origin should never be *; in my implementation, it's set by a property. – lekant Oct 4 '16 at 16:59

The solution has been edited to include best practices – lekant Feb 27 at 22:41

add a comment

up vote

13

down vote

The server (that the POST request is sent to) needs to include the Content-Type header in its response.

Here's a list of typical headers to include, including one custom "X_ACCESS_TOKEN" header:

"X-ACCESS_TOKEN", "Access-Control-Allow-Origin", "Authorization", "Origin", "x-requested-with", "Content-Type", "Content-Range", "Content-Disposition", "Content-Description"

That's what your http server guy needs to configure for the web server that you're sending your requests to.

You may also want to ask your server guy to expose the "Content-Length" header.

He'll recognize this as a Cross-Origin Resource Sharing (CORS) request and should understand the implications of making those server configurations.

For details see:

http://www.w3.org/TR/cors/

http://enable-cors.org/

shareimprove this answer

edited Feb 23 '15 at 15:35

answered Feb 23 '15 at 15:29

l3x

15.8k13425

add a comment

up vote

5

down vote

The following works for me with nodejs:

xServer.use(function(req, res, next) {

res.setHeader("Access-Control-Allow-Origin", 'http://localhost:8080');

res.setHeader('Access-Control-Allow-Methods', 'POST,GET,OPTIONS,PUT,DELETE');

res.setHeader('Access-Control-Allow-Headers', 'Content-Type,Accept');

next();

});

shareimprove this answer

answered Apr 16 '16 at 16:29

Fernando Gabrieli

4472821

does the order of the Access-Control-Allow-Methods matter? – vini Oct 2 '16 at 9:26

@vini, i think it does not matter. – Ninja Coding May 20 '17 at 20:44

add a comment

up vote

4

down vote

The headers you are trying to set are response headers. They have to be provided, in the response, by the server you are making the request to.

They have no place being set on the client. It would be pointless having a means to grant permissions if they could be granted by the site that wanted permission instead of the site that owned the data.

shareimprove this answer

answered Sep 8 '14 at 15:05

Quentin

609k66819987

How do I set the headers in the backend? – user3194367 Sep 8 '14 at 15:11

@user3194367 — It depends on your backend. I don't know what HTTP server or programming language you are making the request to. – Quentin Sep 8 '14 at 15:28

I guess I'll have to talk to my server guy. – user3194367 Sep 8 '14 at 15:34

add a comment

up vote

3

down vote

If anyone experiences this problem with an express server, add the following middleware

app.use(function(req, res, next) {

res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");

next();

});

shareimprove this answer

answered Oct 23 '16 at 14:08

Abdel

1,4061121

add a comment

up vote

3

down vote

this is backend problem. if use sails api on backend change cors.js and add your filed here

module.exports.cors = {

allRoutes: true,

origin: '*',

credentials: true,

methods: 'GET, POST, PUT, DELETE, OPTIONS, HEAD',

headers: 'Origin, X-Requested-With, Content-Type, Accept, Engaged-Auth-Token'

};

shareimprove this answer

answered Dec 17 '16 at 23:41

Sedat Y

20125

add a comment

up vote

2

down vote

if you testing some javascript requests for ionic2 or angularjs 2 , in your chrome on pc or mac , then be sure that you install CORS plugin for chrome browser to allow cross origin .

mayba get requests will work without needing that , but post and puts and delete will need you to install cors plugin for testing to go without problems , that definitley not cool , but i do not know how people do it without CORS plugin .

and also be sure the json response is not returning 400 by some json status

shareimprove this answer

answered Nov 8 '16 at 13:17

albaiti

511610

add a comment

up vote

2

down vote

In my case, I'm receiving several parameters as @HeaderParam into a web service method.

These parameters MUST be declared in your CORS filter that way:

@Provider

public class CORSFilter implements ContainerResponseFilter {

@Override

public void filter(ContainerRequestContext requestContext, ContainerResponseContext responseContext) throws IOException {

MultivaluedMap<String, Object> headers = responseContext.getHeaders();

headers.add("Access-Control-Allow-Origin", "*");

...

headers.add("Access-Control-Allow-Headers",

/*

* name of the @HeaderParam("name") must be declared here (raw String):

*/

"name", ...);

headers.add("Access-Control-Allow-Credentials", "true");

headers.add("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS, HEAD");

}

}

shareimprove this answer

edited Jan 8 '17 at 22:45

Matt

2,46111725

answered Aug 10 '16 at 8:33

russellhoff

80511641

add a comment

up vote

1

down vote

Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers error means that Access-Control-Allow-Origin field of HTTP header is not handled or allowed by response. Remove Access-Control-Allow-Origin field from the request header.