angularjs post 跨域
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>