V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
Nevergp
V2EX  ›  问与答

AngularJS 使用 $http 做 ajax 处理,出现 OPTIONS 怎么解决?

  •  
  •   Nevergp · 2014-12-12 05:05:44 +08:00 · 10686 次点击
    这是一个创建于 3635 天前的主题,其中的信息可能已经有所发展或是发生改变。
    $http({
    method: 'POST',
    url: Common.URL.sign_up,
    data: {
    phone: _m.phone,
    }
    }).success(function(data){
    }).error(function() {
    /* Act on the event */
    });
    发现在chrome下,捕捉的请求类型都是 OPTIONS的,而不是POST的,大神请教如何解决?(注,url是跨域的,但server端已做了允许跨域处理)
    10 条回复    2014-12-21 20:43:24 +08:00
    fising
        1
    fising  
       2014-12-12 07:20:32 +08:00 via iPad
    server端怎么处理的?两种情况:设置错误或客户端不识别
    leer561
        2
    leer561  
       2014-12-12 08:53:59 +08:00   ❤️ 1
    data: {
    phone: _m.phone,
    }
    有个逗号?
    skylooker
        3
    skylooker  
       2014-12-12 09:04:30 +08:00
    用angularjs产生的非get的请求,在chrome下都显示的是OPTIONS,我用chrome调试的生活,也这样显示的,正常的。
    skylooker
        4
    skylooker  
       2014-12-12 09:06:34 +08:00
    顺便附上我的代码

    $http({
    withCredentials:true,
    url: appbaseurl,
    method: "POST",
    data: {
    "webform":{
    "phone": $scope.databm.phone,
    "v1":$scope.databm.v1,
    "v2":$scope.databm.v2,
    "v3":$scope.databm.v3
    }
    },
    headers: {'Content-Type': 'application/json', 'X-CSRF-Token': $scope.databm.token}
    }).success(function () {
    $ionicPopup.alert({
    title: '报名成功',
    template: '请按时参加活动',
    okType: 'button-light'
    });
    })
    hcymk2
        5
    hcymk2  
       2014-12-12 09:10:16 +08:00
    不知道是不是用的cors 如果是
    是先OPTIONS一次吧。
    https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
    skylooker
        6
    skylooker  
       2014-12-12 09:14:07 +08:00   ❤️ 1
    额,我又看了一下,每次的post请求要分2次进行,第一次OPTIONS,第二次才是PUT,楼主你看看第一次发生options请求时,在console窗口的错误提示是什么,然后再找原因。很有可能是跨域没做好。

    我服务端的设置:

    Access-Control-Allow-Credentials:true
    Access-Control-Allow-Headers:X-CSRF-Token,Content-Type
    Access-Control-Allow-Methods:PUT
    Access-Control-Allow-Origin:http://localhost:8888

    (Access-Control-Allow-Origin后面填写你的网址,记得加上HTTP,不能只输入域名)
    ijse
        7
    ijse  
       2014-12-12 10:00:51 +08:00
    看lz请求的url是注册,应该会用到cookie。

    默认情况下通过CORS这样的方式是不会传递cookie.
    除了后端需要添加一个response头,Access-Control-Allow-Credentials来控制是否允许Cookie的提交之外,在Angular中请求还需要添加一个配置项:withCredentials: true。

    $http.post(url, {withCredentials: true, ...})

    // 或者

    $http({withCredentials: true, ...}).post(...)

    // 或者

    .config(function ($httpProvider) {

    $httpProvider.defaults.withCredentials = true;

    }
    EPr2hh6LADQWqRVH
        8
    EPr2hh6LADQWqRVH  
       2014-12-12 10:05:05 +08:00
    跨域
    appell
        9
    appell  
       2014-12-21 20:40:22 +08:00
    CORS post 时要求 Content-Type 是
    application/x-www-form-urlencoded
    multipart/form-data
    text/plain
    之一时才会直接 post,而不需要先 option。
    参考 MDN 文档: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
    appell
        10
    appell  
       2014-12-21 20:43:24 +08:00
    搭车问个问题:
    在 CORS GET 时,我在 HTTP Headers 中添加了 Authorization 字段,GET 操作变成了先 OPTIONS,再 GET。
    疑问是:Authorization 是 HTTP Headers 中有定义的字段,不是自己添加的类似 X-xx-xxx 的字段,为什么也需要先 OPTIONS?
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2705 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 15:16 · PVG 23:16 · LAX 07:16 · JFK 10:16
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.