angularjs post 跨域

时间:2021-09-13 03:20:43

web api搞好了;用Ajax妥妥的;但是前端用的AngulagJS,也懒得再换为Ajax了;

但是问题来了;提示:

已拦截跨源请求:同源策略禁止读取位于 http://x.x.x.x:port/api/Person/Update 的远程资源。(原因:CORS 预检通道未成功)。

搜索一下:一般就是配置服务器和客户端的header

找到了一篇可以解决的:http://www.cnblogs.com/BGOnline/p/5996289.html

1.开启angularjs的CORS支持

.config(function($httpProvider) { // CORS post跨域配置
$httpProvider.defaults.useXDomain = true;
$httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';
var param = function(obj) { // 修改angularjs $http.post的默认传参方式
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;
}; $httpProvider.defaults.transformRequest = [function(data) {
return angular.isObject(data) && String(data) !== '[object File]' ? param(data) : data;
}]; delete $httpProvider.defaults.headers.common['X-Requested-With'];
})

2.开启服务器端CORS支持

header('Access-Control-Allow-Origin: *');//(我不知道这个是怎么配置的,PHP的?)

我自己的web.config相关配置

    <!--跨域..-->
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
<!--Content-Type,-->
<add name="Access-Control-Allow-Headers" value="Origin, X-Requested-With, Content-Type, Accept" />
<add name="Access-Control-Allow-Methods" value="GET,POST,PUT, DELETE, OPTIONS" />
</customHeaders>
</httpProtocol>
</system.webServer>