CODEWITHSUNDEEP
angularhttpmicrosoft-edge
Ka Tech
Ka Tech

Reputation: 9457

IE Edge - Request header Authorization was not present in the Access-Control-Allow-Headers list

In my Angular 2 application I am trying to login into my backend server with the password and username credentials. So far I have had no issues with Chrome and Safari in running my app and logging in. Today for the first time I have tried running the app in Microsoft IE Edge. However when I try to login I get the following error:

SEC7123:Request header Authorization was not present in the Access-Control-Allow-Headers list.

I am using angular 2+ to run the http request. Here it is my login function below. Any ideas what the fix may be? 

loginHttp(username: string, password: string): any {
    let headers: any = new Headers();
    let data: any = null;
    headers.append("Authorization", "Basic " + btoa(username + ":" + password)); 
    headers.append("Content-Type", "application/x-www-form-urlencoded");
    return this.http.post(this.authService.getUrl()+ '/login', data, {headers: headers})
    .map(res => res.json());
}

UPDATE

Checking the backend (we use symphony) we do include CORS in the header:

defaults:
        allow_origin:  ["%cors_allow_origin%"]
        allow_methods: ["GET", "POST", "PUT", "DELETE", "LINK", "UNLINK"]
        allow_headers: ["Content-Type", "Authorization", "X-Employee-Id"]
        max_age:       3600
    paths:
        '^/': ~

RESOLVED

The issue in the end was to do with Symphony. We used nelmio cors config but it did not set the headers. Got it working anyway.

Upvotes: 1

Views: 3157

Answers (1)

Radonirina Maminiaina
Radonirina Maminiaina

Reputation: 7004

Make sure you allow CROS

res.setHeader('Access-Control-Allow-Origin', '*');
// methods you wish to allow
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');

Note: I use Express in this example.

The documentation changed a bit. Hope it helps.

Update:

We faced the same problem before using Symfony. Solutions I found are:

  1. Server return OPTIONS Method, which allow CROS
  2. Then do send http verb (GET, POST, ...) after.

Here is an image of what I mean:

enter image description here

Code of the RestListner:

class RestListener
{

    /**
     * Constructor
     */
    public function __construct()
    {

    }

    public function onKernelResponse(FilterResponseEvent $event)
    {
        if (!$event->isMasterRequest())
            return;

        $responseHeaders = $event->getResponse()->headers;

        $responseHeaders->set('Access-Control-Allow-Headers', 'origin, content-type, accept, x-wsse, set-cookie, x-sessid');
        $responseHeaders->set('Access-Control-Allow-Origin', '*');
        $responseHeaders->set('Access-Control-Expose-Headers', '*');
        $responseHeaders->set('Access-Control-Allow-Methods', 'POST, GET, PUT, DELETE, OPTIONS');

        $request = $event->getRequest();
        $method  = $request->getRealMethod();

        if (strtoupper($method) === 'OPTIONS') {
            header('Access-Control-Allow-Headers: origin, content-type, accept, x-wsse, set-cookie, x-sessid');
            header('Access-Control-Allow-Origin: *');
            header('Access-Control-Expose-Headers', '*');
            header('Access-Control-Allow-Methods: POST, GET, PUT, DELETE, OPTIONS');
            die(json_encode(array(
                'message' => 'Accepted',
                'status' => 202,
            )));
        }
    }
}

We used symfony as back-end and Angular 2.x as Front-end.

With the solution, CROS is passed.

Upvotes: 1

Related Questions