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>
angularjs post 跨域的更多相关文章
- AngularJS实现跨域请求
跨域,前端开发中经常遇到的问题,AngularJS实现跨域方式类似于Ajax,使用CORS机制. 下面阐述一下AngularJS中使用$http实现跨域请求数据. AngularJS XMLHttpR ...
- angularjs flask跨域问题 XMLHttpRequest cannot load. No 'Access-Control-Allow-Origin'
场景,我要来我的server(A)上用api来访问另一个server(B)的问题,如果直接在A上调用B的api,那么就会出现XMLHttpRequest cannot load. No 'Access ...
- angularjs+webapi2 跨域Basic 认证授权(二)
在上一篇中大概演示了 整个认证授权的过程.今天在这篇博客中将结合上一篇的例子继续在跨域的情况 我们用ionic 写一个简单的页面 值得注意的是 在ionic.bundle.js 里面集成了angula ...
- angularjs+webapi2 跨域Basic 认证授权(一)
如今的app,利用各种前端框架结合html5的混合开发模式已然盛极一时.其中ionic+angularjs更是如日中天.这种模式利用angularjs $http 请求数据api 以达到前后端分离深得 ...
- angularjs jsonp跨域
<script> (function(angular){ "use strict" var app= angular.module('appController',[] ...
- Angularjs之如何在跨域请求中传输Cookie
一般情况我们在使用WebApi之类的技术时,都会遇到跨域的问题,这个只需要在服务端做一下处理即可. 如果这些GET或POST请求不需要传递Cookie数据的话,就没什么问题了,但如果需要,那么会发现 ...
- angular.js跨域post解决方案
跨域,前端开发中经常遇到的问题,AngularJS实现跨域方式类似于Ajax,使用CORS机制. 下面阐述一下AngularJS中使用$http实现跨域请求数据. AngularJS XMLHttpR ...
- 利用nginx 反向代理解决跨域问题
说到nginx,不得不说真的很强大,也带来很多便利用于解决一些头疼的难题. 一般来说可以用来做:静态页面的服务器.静态文件缓存服务器.网站反向代理.负载均衡服务器等等,而且实现这一切,基本只需要改改那 ...
- AngularJS中get请求URL出现跨域问题
今天早上帮助同学看了一个AngularJS的问题,主要是请求中出现了跨域访问,请求被阻止. 下面是她给我的代码: <html lang="en" ng-app="m ...
随机推荐
- [转载] CMake Official Tutorial——教程还是官方的好
CMake官方教程传送门:https://cmake.org/cmake-tutorial/ 以下的内容跟官方教程基本一致,少数地方根据自己的测试有所改动: A Basic Starting Poin ...
- jQuery慢慢啃之回调(十三)
1.callbacks.add(callbacks)//回调列表中添加一个回调或回调的集合 // a sample logging function to be added to a callback ...
- Action配置
Action是一个逻辑控制器,并不直接对浏览器生成响应,而是返回指定逻辑视图(一个字符串). 不推荐在Action的name属性值中使用点(.)和中划线(-),有可能会引发一些未知异常. 1使用A ...
- 添加标签2 jquery 和JS
TAG添加标签 做了个方法方便调用 一.JS版本 <!DOCTYPE html> <html lang="en"> <head> <met ...
- PHP导出excel信息表格
//导出表格public function get_exel($fileName,$headArr,$list){//导入PHPExcel类库,因为PHPExcel没有用命名空间,只能import导入 ...
- Linux脚本(二)
1.for循环以及加法的使用 portStr=`lsof -i:56801 | head -2`count=0for str in `lsof -i:56801 | head -2`do ((coun ...
- observeMode
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>& ...
- Contest20140705 testC DP
testC 输入文件: testC.in 输出文件testC.out 时限1000ms 问题描述: ,⋯,an. ,a2,a3,⋯,an) ,⋯,alm. ,al2,al3,⋯,alm) 现要求G=g ...
- 你真的有必要退出吗——再说Android程序的退出功能
转自你真的有必要退出吗--再说Android程序的退出功能 搞Android开发有一段时间了,相信很多从Windows开发过来的Android程序员都习惯性地会跟我一样遇到过同一个问题:如何彻底退出程 ...
- ArtisticStyle----很好用的C/C++样式格式化工具
下载地址:http://srgb.googlecode.com/files/AStyle_2.02_windows.7z 把astyle.exe 复制到 C:\WINDOWS 目录里,省的指定路径VC ...