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

This topic created in 4174 days ago, the information mentioned may be changed or developed.

$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端已做了允许跨域处理）

options

function

m.phone

10 replies • 2014-12-21 20:43:24 +08:00

fising

Dec 12, 2014 via iPad

server端怎么处理的？两种情况：设置错误或客户端不识别

leer561

Dec 12, 2014

data: {
phone: _m.phone,
}
有个逗号？

skylooker

Dec 12, 2014

用angularjs产生的非get的请求，在chrome下都显示的是OPTIONS，我用chrome调试的生活，也这样显示的，正常的。

skylooker

Dec 12, 2014

顺便附上我的代码

$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

Dec 12, 2014

不知道是不是用的cors 如果是
是先OPTIONS一次吧。
https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

skylooker

Dec 12, 2014

额，我又看了一下，每次的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

Dec 12, 2014

看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

Dec 12, 2014

跨域

appell

Dec 21, 2014

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

Dec 21, 2014

搭车问个问题：
在 CORS GET 时，我在 HTTP Headers 中添加了 Authorization 字段，GET 操作变成了先 OPTIONS，再 GET。
疑问是：Authorization 是 HTTP Headers 中有定义的字段，不是自己添加的类似 X－xx－xxx 的字段，为什么也需要先 OPTIONS？