发出PUT请求导致在PUT之前首先发送OPTIONS请求,为什么浏览器会以这种方式运行?

时间:2015-07-17 17:01:47

标签: javascript http cors http-put

当我发送POST请求时,它没问题。但是当我发送一个PUT请求(将$ http.post()替换为$ http.put())时,Angular会发送一个没有数据的OPTIONS请求,等待响应并发送带有数据的PUT请求。

这不是CORPS问题,因为它是发送2个请求的客户端。

对于OPTIONS请求,JSON响应未被解析,因为Angular没有进入成功函数。

我想Angular不发送OPTIONS请求。 你知道这个问题吗?你知道修复吗?

代码:

var app = angular.module('myApp', []);
app.config(function($httpProvider) {
    delete $httpProvider.defaults.headers.common['X-Requested-With'];
    $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
    $httpProvider.defaults.headers.put['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
    $httpProvider.defaults.useXDomain = true;
    //
    var param = function(obj) {
        var query = '', name, value, fullSubName, subName, subValue, innerObj, i;
        for(name in obj) {
            value = obj[name];
            if(value instanceof Array) {
                for(i=0; i<value.length; ++i) {
                    subValue = value[i];
                    fullSubName = name + '[' + i + ']';
                    innerObj = {};
                    innerObj[fullSubName] = subValue;
                    query += param(innerObj) + '&';
                }
            }
            else if(value instanceof Object) {
                for(subName in value) {
                    subValue = value[subName];
                    fullSubName = name + '[' + subName + ']';
                    innerObj = {};
                    innerObj[fullSubName] = subValue;
                    query += param(innerObj) + '&';
                }
            }
            else if(value !== undefined && value !== null) {
                query += encodeURIComponent(name) + '=' + encodeURIComponent(value) + '&';
            }
        }
        return query.length ? query.substr(0, query.length - 1) : query;
    };
    // Override $http service's default transformRequest (json to application/x-www-form-urlencoded)
    $httpProvider.defaults.transformRequest = [function(data) {
        return angular.isObject(data) && String(data) !== '[object File]' ? param(data) : data;
    }];
});
app.controller('login', function ($scope, $http) {
    $scope.run = function() {
        var file_data = $("#file").prop("files")[0];
        var datas = {email:"email@domain.com", pass:sha1("xxxxxx")};
        $http.put("http://myapi.com/user/connect", datas
            ).success(function(data, status, headers, config) {
                console.log(data);
            }).error(function(data, status, headers, config) {

            });
        return;
    }
});

第一个请求:

General
Remote Address:127.0.0.1:80
Request URL:http://api.wezit.local/user/connect
Request Method:OPTIONS
Status Code:200 OK

Response Headers
Access-Control-Allow-Methods:POST, GET, PUT, DELETE
Access-Control-Allow-Origin:*
Cache-Control:no-cache, must-revalidate
Connection:Keep-Alive
Content-Length:170
Content-Type:application/json;
Date:Fri, 17 Jul 2015 16:31:15 GMT
Expires:Mon, 26 Jul 1997 05:00:00 GMT
Keep-Alive:timeout=5, max=100
Pragma:no-cache
Server:Apache/2.4.10 (Fedora) PHP/5.5.25
Set-Cookie:PHPSESSID=2dj440b2vr2emi5ht9ojcl8gk6; path=/
Set-Cookie:PHPSESSID=q3pg80qb43ps6tpkljlvelo0k7; path=/
X-Powered-By:PHP/5.5.25

Request Headers
Accept:*/*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:fr-FR,fr;q=0.8,en-US;q=0.6,en;q=0.4
Access-Control-Request-Headers:accept, content-type
Access-Control-Request-Method:PUT
Connection:keep-alive
Host:api.wezit.local
Origin:http://test.local
Referer:http://test.local/api.php
User-Agent:Mozilla/5.0 (X11; Linux i686 (x86_64)) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.125 Safari/537.36

第二个请求:

General
Remote Address:127.0.0.1:80
Request URL:http://api.wezit.local/user/connect
Request Method:PUT
Status Code:200 OK

Response Headers
Access-Control-Allow-Methods:POST, GET, PUT, DELETE
Access-Control-Allow-Origin:*
Cache-Control:no-cache, must-revalidate
Connection:Keep-Alive
Content-Length:327
Content-Type:application/json;
Date:Fri, 17 Jul 2015 16:31:15 GMT
Expires:Mon, 26 Jul 1997 05:00:00 GMT
Keep-Alive:timeout=5, max=99
Pragma:no-cache
Server:Apache/2.4.10 (Fedora) PHP/5.5.25
Set-Cookie:PHPSESSID=18jfhgq2fs1p1f1nu7ua1ap8c3; path=/
Set-Cookie:PHPSESSID=14aifglpntf8amavkipclvom67; path=/
X-Powered-By:PHP/5.5.25

Request Headers
Accept:application/json, text/plain, */*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:fr-FR,fr;q=0.8,en-US;q=0.6,en;q=0.4
Connection:keep-alive
Content-Length:142
Content-Type:application/x-www-form-urlencoded; charset=UTF-8
Host:api.wezit.local
Origin:http://test.local
Referer:http://test.local/api.php
User-Agent:Mozilla/5.0 (X11; Linux i686 (x86_64)) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.125 Safari/537.36

Form Data
email:email@domain.com
pass:ce35927f4dcb044bceda5f385823419cb0156507

1 个答案:

答案 0 :(得分:4)

当您发起跨源请求时,浏览器始终使用OPTION方法发出飞行前请求。这意味着您尝试访问的API与您的应用程序的来源不同。你无能为力。

  

你知道这个问题吗?

您观察到的内容没有问题,这是预期的行为。

  

当我发送POST请求时,没关系。

Here's the reason why it's OK

  

特别是,如果出现以下情况,请求会被预检:

     
      
  • 它使用GET,HEAD或POST以外的方法。此外,如果使用POST来发送具有除以外的Content-Type的请求数据   application / x-www-form-urlencoded,multipart / form-data或text / plain,   例如如果POST请求使用XML向服务器发送XML有效负载   application / xml或text / xml,然后请求预检。
  •   
  • 在请求中设置自定义标头(例如,请求使用标头,例如X-PINGOTHER)
  •