mibbit
mibbit

Reputation: 5375

Request header field Access-Control-Allow-Headers is not allowed by itself in preflight response

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

Answers (27)

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

therohantomar
therohantomar

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

rphv
rphv

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:

API Gateway Enable Cors

...and then deploy the API:

enter image description here

Upvotes: 2

Major_Garlic0057
Major_Garlic0057

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

Chukwuemeka Maduekwe
Chukwuemeka Maduekwe

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

Vaman Patel
Vaman Patel

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

Yong
Yong

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

krupali desai
krupali desai

Reputation: 31

add this headers into your ajax or js function

headers: {
            "Cache-Control": null,
            "X-Requested-With": null,
        }

Upvotes: 3

Janne
Janne

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

Ayman OUKACHA
Ayman OUKACHA

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

Karthikeyan Vellingiri
Karthikeyan Vellingiri

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

Biruk Belihu
Biruk Belihu

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

Sai prateek
Sai prateek

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

Luke Kroon
Luke Kroon

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

user732456
user732456

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

Kristina Mojanovska
Kristina Mojanovska

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

manish arora
manish arora

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

user11815301
user11815301

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

Rajesh Yadav
Rajesh Yadav

Reputation: 21

Message is clear that 'Authorization' is not allowed in API. Set
Access-Control-Allow-Headers: "Content-Type, Authorization"

Upvotes: 2

Eric
Eric

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

Kanomdook
Kanomdook

Reputation: 735

res.setHeader('Access-Control-Allow-Headers', '*');

Upvotes: 7

Shashikant Pandit
Shashikant Pandit

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

Al Kativo
Al Kativo

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

user3248255
user3248255

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

Josh Siegl
Josh Siegl

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

nguy&#234;n
nguy&#234;n

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:
enter image description here

above error is missing Content-Type so add string Content-Type to Access-Control-Allow-Headers

Upvotes: 138

Anne
Anne

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

Related Questions