当我使用 CORS 时，AngularJS $http 似乎没有正确响应

Question

我有一个 AngularJS 应用程序。它向另一台服务器发送数据请求，因此每次 $HTTP 调用都会发出一个 OPTIONS 请求。

当我与提琴手核对时，有两个电话。总是返回 200 OK 然后数据调用的选项。

但是，当我检查 $HTTP 时，它似乎收到了第一个请求（选项请求），而没有收到带有真实数据的第二个请求。

有人能指出我正确的方向吗？

以下是未正确响应的代码示例：

 .factory('isUsernameAvailable', function (appConstant, $q, $http) {
    return function (username) {
        var deferred = $q.defer();
        // if (!angular.isDefined(username) || username == null || username == "" || username.length < 6 ) return deferred.resolve();
        var url = appConstant.baseUrl + '/api/user/existsByName';
        $http({
            url: url,
            method: "PUT",
            data: {
                userName: username
            }
        }).then(function (data) {
                // Found the user, therefore not unique.
                deferred.reject("User name is taken");
            }, function (data) {
                // User not found, therefore unique!
                deferred.resolve();
            });
        return deferred.promise;
    }
  })

我希望它根据是否找到用户名返回成功或失败。但在这种情况下，它总是以失败/错误的形式响应。

以下是提出的要求：

OPTIONS http://localhost:3048/api/user/existsByName HTTP/1.1
Host: localhost:3048
Connection: keep-alive
Access-Control-Request-Method: PUT
Origin: http://localhost:2757
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.95 Safari/537.36
Access-Control-Request-Headers: accept, authorization, content-type
Accept: */*
Referer: http://localhost:2757/Auth/register
Accept-Encoding: gzip, deflate, sdch
Accept-Language: en-US,en;q=0.8

给予：

HTTP/1.1 200 OK
Server: Microsoft-IIS/8.0
Access-Control-Allow-Origin: http://localhost:2757
Access-Control-Allow-Credentials: true
Access-Control-Allow-Methods: PUT
Access-Control-Allow-Headers: content-type
X-SourceFiles: =?UTF-8?B?QzpcR1xhYmlsaXRlc3Qtc2VydmVyXFdlYlJvbGVcYXBpXHVzZXJcZXhpc3RzQnlOYW1l?=
X-Powered-By: ASP.NET
Date: Mon, 12 Jan 2015 17:52:12 GMT
Content-Length: 0

然后：

PUT http://localhost:3048/api/user/existsByName HTTP/1.1
Host: localhost:3048
Connection: keep-alive
Content-Length: 35
Accept: application/json, text/plain, */*
Origin: http://localhost:2757
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.95 Safari/537.36
Authorization: null
Content-Type: application/json;charset=UTF-8
Referer: http://localhost:2757/Auth/register
Accept-Encoding: gzip, deflate, sdch
Accept-Language: en-US,en;q=0.8

{"userName":"abdddcdefgg@live.com"}

给予：

HTTP/1.1 404 Not Found
Cache-Control: no-cache
Pragma: no-cache
Expires: -1
Server: Microsoft-IIS/8.0
Access-Control-Allow-Origin: http://localhost:2757
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: *
Access-Control-Expose-Headers: X-Custom-Header
X-AspNet-Version: 4.0.30319
X-SourceFiles: =?UTF-8?B?QzpcR1xhYmlsaXRlc3Qtc2VydmVyXFdlYlJvbGVcYXBpXHVzZXJcZXhpc3RzQnlOYW1l?=
X-Powered-By: ASP.NET
Date: Mon, 12 Jan 2015 17:52:12 GMT
Content-Length: 0

问题是即使第二个请求在我调试成功和错误函数时返回 200，它仍然会一直转到错误函数。

Answer 1

您应该使用 JSONP 进行跨域 JSON 调用。在此处查看文档：https://docs.angularjs.org/api/ng/service/$http#jsonp。此外，您的引荐页面和来自 OPTIONS 请求的响应必须设置适当的 CORS 标头，否则浏览器将拒绝在此处发送请求，这是我使用的标头设置。

Access-Control-Allow-Headers:Content-Type, Authorization, Content-Length, X-Requested-With, Accept, x-csrf-token, origin
Access-Control-Allow-Methods:GET,PUT,POST,DELETE,OPTIONS
Access-Control-Allow-Origin:*

要使用 PUT 请求调用 $http.jsonp，您需要设置如下配置

var config = {
 method: 'POST',
 data: { test: 'test' }
};

然后将其传递给 $http.jsonp 调用

 $http.jsonp('http://example.com', config);

这里有更多文档 https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS 和 http://en.wikipedia.org/wiki/JSONP