Question

我有以下代码

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');
});

如果我们在token中拥有localStorage密钥的值，则会为每个ajax调用添加Authorization标头。

问题如果没有token（没有发送标头），它会很好用。但是当在localstorage中存在令牌并且我进行API调用时，我会收到以下错误

Response for preflight has invalid HTTP status code 404

经过研究后我发现，在发出真实请求之前，浏览器会进行预检请求（OPTIONS请求）。我还发现我们无法在预检请求中发送自定义标头。那么无论如何要解决这个问题，只有在提出真正的请求时才发送自定义标题。？

我尝试在服务API调用的服务器的.htaccess中添加以下内容

<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>

Answer 1

我自己找到了答案。

它与angular或.htaccess事物无关。它与服务器端更相关。

当发出CORS请求时，浏览器会发出测试（预检）请求以查看是否一切正常，然后才会发出实际请求。

API调用中的以下代码解决了问题。

<?php

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

在进行预检请求时，Angular js不会发送自定义标头

1 个答案: