Angular js don't send custom header while preflight request is made

Question

I have following code

angular.module('myApp.Utils',[])
.factory('AuthInterceptor', function($q, $location) {
    return {
        request: function(config) {
            config.headers = config.headers || {};
            if (window.localStorage.token) {
                config.headers.Authorization = 'Bearer ' + window.localStorage.token;
            }
            config.headers["Content-Type"] = 'application/x-www-form-urlencoded';
            return config || $q.when(config);
        },
        response: function(response) {
            if (response.status === 401) {
                //redirect user to login page
                $location.url('/login');
            }
            return response || $q.when(response);
        }
    };
})
.config(function($httpProvider) {
    $httpProvider.interceptors.push('AuthInterceptor');
});

If we have value for token key in localStorage, it adds Authorization Header to every ajax calls made.

Problem It works well if there is no token (No header sent). But when token exist in localstorage and I make an API call, I get following error

Response for preflight has invalid HTTP status code 404

After research i found that, the browser makes preflight request (OPTIONS request), before making a real request. I also found that we cannot send custom Headers in preflight request. So is there anyway to fix this, to send custom Headers only when making a real request.?

I have tried adding following in .htaccess of the server that serves API calls

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
    Header add Access-Control-Allow-Headers "Content-Type, Authorization, Origin, X-Requested-With"
    Header always set Access-Control-Allow-Methods "GET,POST,HEAD,DELETE,PUT,OPTIONS"
</IfModule>

WatsMyName · Accepted Answer · 2016-12-14 03:53:41Z

2

I have found answer myself.

Its not related to angular or .htaccess thing. Its more related to the server side.

When CORS request is made, the browser makes a test(preflight) request to see if everything is ok, then only it makes actual request.

Following code in the API call solved the problem.

<?php

if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
    header('Access-Control-Allow-Origin: *');
    header('Access-Control-Allow-Headers: X-Requested-With, Authorization');
    exit;
}

edited Dec 14, 2016 at 3:53

answered Dec 14, 2016 at 3:40

WatsMyName

4,5025 gold badges49 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular js don't send custom header while preflight request is made

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related