Reputation: 5375
I have come across CORS issues multiple times and can usually fix it but I want to really understand by seeing this from a MEAN stack paradigm.
Before, I simply added middleware in my express server to catch these things. However, it looks like there is some kind of pre-hook that is erroring out my requests.
Request header field Access-Control-Allow-Headers is not allowed by Access-Control-Allow-Headers in preflight response
I assumed that I could do this:
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Headers","*")
})
or the equivalent but this doesn't seem to fix it. I also of course tried
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Headers","Access-Control-Allow-Headers")
})
Still no luck.
Upvotes: 451
Views: 1125137
Reputation: 31
We can use the following:
Access-Control-Allow-Origin
, which specifies which websites should be given permission for CORS where *
is for all the websites.
Access-Control-Allow-Methods
, which specifies which methods should be allowed.
Access-Control-Allow-Headers
, which is used for authorization.
An example of them all implemented:
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
app.use(bodyParser.json());
app.use((req,res,next) => {
res.setHeader('Access-Control-Allow-Origin','*');
res.setHeader('Access-Control-Allow-Methods','OPTIONS, GET, POST, PUT, PATCH, DELETE');
res.setHeader('Access-Control-Allow-Headers','Content-Type,Authorization');
next();
});
Upvotes: 1
Reputation: 469
In Next js My Problem got Solved using
const cors=micro_cors({
origin:"https://studio.apollographql.com",
allowMethods:['POST','GET','PUT','PATCH','DELETE','OPTIONS'],
allowCredentials:true,
allowHeaders:['X-Requested-With','X-HTTP-Method-Override','Content-Type','Authorization','Accept','Access-Control-Allow-Credentials','Access-Control-Allow-Origin' ]
})
then wapping it in
export default cors(async function handler(req, res) {
await serverStart
if(req.method==="OPTIONS"){
res.end()
return false
}
apolloserver.createHandler({path:"/api/graphql"})(req,res)
})
Upvotes: 0
Reputation: 5537
If you're configuring an AWS API Gateway (for example, that's sending the request from a React AWS Amplify app), the solution is to append the string
Access-Control-Allow-Methods,Access-Control-Allow-Headers,Access-Control-Allow-Origin
to the Access-Control-Allow-Headers field in the Enable CORS dialog fpr the given endpoint & method:
...and then deploy the API:
Upvotes: 2
Reputation: 27
I just added response.headers;
after
http.Response response = await http.get(
Uri.parse(
api + "api/users/all",
),
);
The CORS setup in the backend(Django) as official documentation, Djnago-cors-headers
Upvotes: -2
Reputation: 8546
Make sure all headers you require from client is passed to to Access-Control-Allow-Headers, else you'll keep running into CORS issues. In this case, that would be 'x-api-key' else you keep running into cors issues
const options = {
method: "GET",
headers: new Headers({
"X-API-Key": "ds67GHjkshjh00ZZhhsskhjgasHJHJHJ&87",
}),
};
response.setHeader(
"Access-Control-Allow-Headers",
"X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version, x-api-key");
Upvotes: -1
Reputation: 9
Yes, Use this i was also facing issue while integrating in angular application.
Write this.
app.use((req, res, next) => {
res.setHeader("Access-Control-Allow-Origin", "*");
res.setHeader(
"Access-Control-Allow-Headers",
"Origin,X-Requested-With, Content-Type, Accept, Authorization"
);
res.setHeader("Access-Control-Allow-Methods", "GET,POST,PATCH,PUT,DELETE,OPTIONS");
next();
});
Follow me Thanks
Upvotes: 0
Reputation: 994
I faced similar issues when trying to connect to a Django backend:
Request header field authorisation is not allowed by Access-Control-Allow-Headers in preflight response
After hours of searching, I finally resolved it with the help of the following comment:
Also make sure you're spelling Authorization the american way not the Britsh way. That's half an hour of my life I won't get back. Thx USA! [sigh]
So a hint for someone else who is stuck: check that you are spelling the word "Authorization" correctly. If you set the Access-Control-Allow-Headers = ["Authorisation"], you are allowing the wrong header!
Upvotes: 1
Reputation: 31
add this headers into your ajax or js function
headers: {
"Cache-Control": null,
"X-Requested-With": null,
}
Upvotes: 3
Reputation: 1725
Just to add that you can put those headers also to Webpack config file. I needed them as in my case as I was running webpack dev server.
devServer: {
headers: {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Credentials": "true",
"Access-Control-Allow-Methods": "GET,HEAD,OPTIONS,POST,PUT",
"Access-Control-Allow-Headers": "Origin, X-Requested-With, Content-Type, Accept, Authorization"
}
},
Upvotes: 16
Reputation: 11
const express = require('express')
const cors = require('cors')
const app = express()
app.get('/with-cors', cors(), (req, res, next) => {
res.json({ msg: 'WHOAH with CORS it works! 🔝 🎉' })
})
Adding cors in get function Is what worked for me
Upvotes: 1
Reputation: 1330
I too faced the same problem in Angular 6. I solved the issue by using below code. Add the code in component.ts file.
import { HttpHeaders } from '@angular/common/http';
headers;
constructor() {
this.headers = new HttpHeaders();
this.headers.append('Access-Control-Allow-Headers', 'Authorization');
}
getData() {
this.http.get(url,this.headers). subscribe (res => {
// your code here...
})}
Upvotes: 2
Reputation: 49
After spending almost a day, I just found out that adding the below two codes solved my issue.
Add this in the Global.asax
protected void Application_BeginRequest()
{
if (Request.HttpMethod == "OPTIONS")
{
Response.StatusCode = (int)System.Net.HttpStatusCode.OK;
Response.End();
}
}
and in the web config add the below
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
<add name="Access-Control-Allow-Methods" value="*" />
<add name="Access-Control-Allow-Headers" value="Content-Type, Authorization" />
</customHeaders>
</httpProtocol>
Upvotes: 5
Reputation: 11906
this problem occurs when we make custom header for request.This request that uses the HTTP OPTIONS
and includes several headers.
The required header for this request is Access-Control-Request-Headers
, which should be part of response header and should allow request from all the origin. Sometimes it needs Content-Type
as well in header of response. So your response header should be like that -
response.header("Access-Control-Allow-Origin", "*"); // allow request from all origin
response.header("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT");
response.header("Access-Control-Allow-Headers", "Access-Control-Allow-Headers, Origin, X-Requested-With, Content-Type, Accept, Authorization");
Upvotes: 5
Reputation: 1103
To add to the other answers. I had the same problem and this is the code i used in my express server to allow REST calls:
app.all('*', function(req, res, next) {
res.header('Access-Control-Allow-Origin', 'URLs to trust of allow');
res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
res.header('Access-Control-Allow-Headers', 'Content-Type');
if ('OPTIONS' == req.method) {
res.sendStatus(200);
} else {
next();
}
});
What this code basically does is intercepts all the requests and adds the CORS headers, then continue with my normal routes. When there is a OPTIONS request it responds only with the CORS headers.
EDIT: I was using this fix for two separate nodejs express servers on the same machine. In the end I fixed the problem with a simple proxy server.
Upvotes: 13
Reputation: 2688
The accepted answer is ok, but I had difficulties to understand it. So here is a simple example to clarify it.
In my ajax request I had a standard Authorization header.
$$(document).on('ajaxStart', function(e){
var auth_token = localStorage.getItem(SB_TOKEN_MOBILE);
if( auth_token ) {
var xhr = e.detail.xhr;
xhr.setRequestHeader('**Authorization**', 'Bearer ' + auth_token);
}
This code produces the error in the question. What I had to do in my nodejs server was to add Authorization in allowed headers:
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type,**Authorization**');
Upvotes: 23
Reputation: 51
If you are trying to add a custom header on the request headers, you have to let the server know that specific header is allowed to take place. The place to do that is in the class that filters the requests. In the example shown below, the custom header name is "type":
public class CorsFilter implements Filter {
@Override
public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
HttpServletRequest request = (HttpServletRequest) req;
HttpServletResponse response = (HttpServletResponse) res;
response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("Access-Control-Allow-Methods", "GET,PUT,POST,DELETE,PATCH,OPTIONS");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "Content-Type, Accept, X-Requested-With, remember-me, Authorization, type ");
response.setHeader("Access-Control-Expose-Headers","Authorization");
}
}
Upvotes: 3
Reputation: 2101
This is what you need to add to make it work.
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT");
response.setHeader("Access-Control-Allow-Headers", "Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers");
The browser sends a preflight request (with method type OPTIONS) to check if the service hosted on the server is allowed to be accessed from the browser on a different domain. In response to the preflight request if you inject above headers the browser understands that it is ok to make further calls and i will get a valid response to my actual GET/POST call. you can constraint the domain to which access is granted by using Access-Control-Allow-Origin", "localhost, xvz.com" instead of * . ( * will grant access to all domains)
Upvotes: 208
Reputation:
In Post API call we are sending data in request body. So if we will send data by adding any extra header to an API call. Then first OPTIONS API call will happen and then post call will happen. Therefore, you have to handle OPTION API call first.
You can handle the issue by writing a filter and inside that you have to check for option call API call and return a 200 OK status. Below is the sample code:
package com.web.filter;
import java.io.IOException;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.catalina.connector.Response;
public class CustomFilter implements Filter {
public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain)
throws IOException, ServletException {
HttpServletResponse response = (HttpServletResponse) res;
HttpServletRequest httpRequest = (HttpServletRequest) req;
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, OPTIONS, DELETE");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "x-requested-with, Content-Type");
if (httpRequest.getMethod().equalsIgnoreCase("OPTIONS")) {
response.setStatus(Response.SC_OK);
}
chain.doFilter(req, res);
}
public void init(FilterConfig filterConfig) {
// TODO
}
public void destroy() {
// Todo
}
}
Upvotes: 2
Reputation: 21
Message is clear that 'Authorization' is not allowed in API. Set
Access-Control-Allow-Headers: "Content-Type, Authorization"
Upvotes: 2
Reputation: 489
I received the error the OP stated using Django, React, and the django-cors-headers lib. To fix it with this stack, do the following:
In settings.py add the below per the official documentation.
from corsheaders.defaults import default_headers
CORS_ALLOW_HEADERS = default_headers + (
'YOUR_HEADER_NAME',
)
Upvotes: 5
Reputation: 2834
That same issue i was facing.
I did a simple change.
<modulename>.config(function($httpProvider){
delete $httpProvider.defaults.headers.common['X-Requested-With'];
});
Upvotes: 0
Reputation: 145
Very good i used this on a silex project
$app->after(function (Request $request, Response $response) {
$response->headers->set('Access-Control-Allow-Origin', '*');
$response->headers->set("Access-Control-Allow-Credentials", "true");
$response->headers->set("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT");
$response->headers->set("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization");
});
Upvotes: 5
Reputation: 51
In Chrome:
Request header field X-Requested-With is not allowed by Access-Control-Allow-Headers in preflight response.
For me, this error was triggered by a trailing space in the URL of this call.
jQuery.getJSON( url, function( response, status, xhr ) {
...
}
Upvotes: 5
Reputation: 735
I just ran into this issue myself, in the context of ASP.NET make sure your Web.config looks like this:
<system.webServer>
<modules>
<remove name="FormsAuthentication" />
</modules>
<handlers>
<remove name="ExtensionlessUrlHandler-Integrated-4.0" />
<!--<remove name="OPTIONSVerbHandler"/>-->
<remove name="TRACEVerbHandler" />
<!--
<add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
-->
</handlers>
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
<add name="Access-Control-Allow-Headers" value="Content-Type, Authorization" />
<add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
</customHeaders>
</httpProtocol>
Notice the Authorization value for the Access-Control-Allow-Headers
key. I was missing the Authorization value, this config solves my issue.
Upvotes: 5
Reputation: 5326
This problem solved with
"Origin, X-Requested-With, Content-Type, Accept, Authorization"
Particular in my project (express.js/nodejs)
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization");
next();
});
Update:
Every time error: Access-Control-Allow-Headers is not allowed by itself in preflight response
error you can see what wrong with chrome developer tool:
above error is missing Content-Type
so add string Content-Type
to Access-Control-Allow-Headers
Upvotes: 138
Reputation: 7643
When you start playing around with custom request headers you will get a CORS preflight. This is a request that uses the HTTP OPTIONS
verb and includes several headers, one of which being Access-Control-Request-Headers
listing the headers the client wants to include in the request.
You need to reply to that CORS preflight with the appropriate CORS headers to make this work. One of which is indeed Access-Control-Allow-Headers
. That header needs to contain the same values the Access-Control-Request-Headers
header contained (or more).
https://fetch.spec.whatwg.org/#http-cors-protocol explains this setup in more detail.
Upvotes: 404