使用angularjs $ http的CORS问题

Question

在CORS请求中使用angularjs $ http时，我遇到问题，我的成功函数authenticateSuccess（data，status，headers）获得错误的标题。 众所周知，每个CORS请求在angularjs中将是两次，我从服务器获得两次响应，第一次是cors验证信息，第二次是所需的响应，但是我的成功函数在第一个响应中获取标头。 但这是来自第二响应的数据。

function login(credentials) {

        var data = {
            username: credentials.username,
            password: credentials.password,
            rememberMe: credentials.rememberMe
        };
        console.log(data);
        return $http.post('//localhost:8080/api/authenticate', data).success(authenticateSuccess);

        function authenticateSuccess(data, status, headers) {
            console.log(headers());
            console.log(data);
            var bearerToken = headers('Authorization');
            if (angular.isDefined(bearerToken) && bearerToken.slice(0, 7) === 'Bearer ') {
                var jwt = bearerToken.slice(7, bearerToken.length);
                service.storeAuthenticationToken(jwt, credentials.rememberMe);
                return jwt;
            }
        }
    }

Answer 1

您正在收到此问题，因为您要发送的标头与后端中的标头不匹配

因此，假设在前端您发送标头

contentHeaders =新的Headers（）; contentHeaders.append（'Authorization'，'your token'）; contentHeaders.append（'Content-Type'，'application / json'）; contentHeaders.append（'Access-Control-Allow-Origin'，'*'）;

因此，“ Authorization”，“ Content-type”，“ Access-Control-Allow-Origin”等标头应与后端允许的标头匹配。

因此，在后端“ Access-Control-Allow-Headers”中应具有上述所有标头，请参见下文

res.header（“ Access-Control-Allow-Origin”，“ *”）; res.header（“ Access-Control-Allow-Headers”，“授权，内容类型，Access-Control-Allow-Origin”）;

因此，这里必须在Access-Control-Allow-Headers中传递从前端发送的所有标头：“授权”，“内容类型”，“ Access-Control-Allow-Origin”。

当您使用以上概念时，它将完美地工作。

谢谢