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 跨域的更多相关文章

  1. AngularJS实现跨域请求

    跨域,前端开发中经常遇到的问题,AngularJS实现跨域方式类似于Ajax,使用CORS机制. 下面阐述一下AngularJS中使用$http实现跨域请求数据. AngularJS XMLHttpR ...

  2. angularjs flask跨域问题 XMLHttpRequest cannot load. No 'Access-Control-Allow-Origin'

    场景,我要来我的server(A)上用api来访问另一个server(B)的问题,如果直接在A上调用B的api,那么就会出现XMLHttpRequest cannot load. No 'Access ...

  3. angularjs+webapi2 跨域Basic 认证授权(二)

    在上一篇中大概演示了 整个认证授权的过程.今天在这篇博客中将结合上一篇的例子继续在跨域的情况 我们用ionic 写一个简单的页面 值得注意的是 在ionic.bundle.js 里面集成了angula ...

  4. angularjs+webapi2 跨域Basic 认证授权(一)

    如今的app,利用各种前端框架结合html5的混合开发模式已然盛极一时.其中ionic+angularjs更是如日中天.这种模式利用angularjs $http 请求数据api 以达到前后端分离深得 ...

  5. angularjs jsonp跨域

    <script> (function(angular){ "use strict" var app= angular.module('appController',[] ...

  6. Angularjs之如何在跨域请求中传输Cookie

    一般情况我们在使用WebApi之类的技术时,都会遇到跨域的问题,这个只需要在服务端做一下处理即可. 如果这些GET或POST请求不需要传递Cookie数据的话,就没什么问题了,但如果需要,那么会发现 ...

  7. angular.js跨域post解决方案

    跨域,前端开发中经常遇到的问题,AngularJS实现跨域方式类似于Ajax,使用CORS机制. 下面阐述一下AngularJS中使用$http实现跨域请求数据. AngularJS XMLHttpR ...

  8. 利用nginx 反向代理解决跨域问题

    说到nginx,不得不说真的很强大,也带来很多便利用于解决一些头疼的难题. 一般来说可以用来做:静态页面的服务器.静态文件缓存服务器.网站反向代理.负载均衡服务器等等,而且实现这一切,基本只需要改改那 ...

  9. AngularJS中get请求URL出现跨域问题

    今天早上帮助同学看了一个AngularJS的问题,主要是请求中出现了跨域访问,请求被阻止. 下面是她给我的代码: <html lang="en" ng-app="m ...

随机推荐

  1. jquery自适应布局

    代码整理 - uix.layout.js /** * Grace [jQuery.js] * * UIX页面布局 * 290353142@qq.com * exp: * $.uix.layout(); ...

  2. Android中解析XML的方法

    假设我要解析如下的XML文件: <?xml version="1.0" encoding="UTF-8"?> <books> <b ...

  3. JS字符串操作大全

    String对象属性 (1) length属性 length算是字符串中非常常用的一个属性了,它的功能是获取字符串的长度.当然需要注意的是js中的中文每个汉字也只代表一个字符,这里可能跟其他语言有些不 ...

  4. 网站开发常用jQuery插件总结(九)侧边栏插件pageslide

    一.pageslide插件功能 实现现实隐藏侧边栏的功能.插件可以读取另个一html,也可以是当前页面中的元素. 二.pageslide官方地址 http://srobbin.com/jquery-p ...

  5. WebMethod 属性

    WebMethod有以下几种属性: BufferResponse CacheDuration Description EnableSession MessageName TransactionOpti ...

  6. Bootstrap_排版_表格

    一.基础表格 <table class="table"> <thead> <tr> <th>表格标题</th> < ...

  7. php 执行linux 命令函数

    php的内置函数exec,system都可以调用系统命令(shell命令),当然还有passthru,escapeshellcmd等函数. 在很多时候利用php的exec,system等函数调用系统命 ...

  8. Android Handler、Lopper消息驱动机制

    Android应用程序是通过消息来驱动的,系统为每一个应用程序维护一个消息队例(MesageQueue),应用程序的主线程不断地从这个消息队例中获取消息(Mesage),然后对这些消息进行处理(Han ...

  9. java 读入换行

    java中实现换行有以下几种方法:1.使用java中的转义符"\r\n": 注意:\r,\n的顺序是不能够对换的,否则不能实现换行的效果. 2.BufferedWriter的new ...

  10. Hibernate中的多对多关系详解(3)​

    前面两节我们讲到了一对一的关系,一对多,多对一的关系,相对来说,是比较简单的,但有时,我们也会遇到多对多的关系,比如说:角色与权限的关系,就是典型的多对多的关系,因此,我有必要对这种关系详解,以便大家 ...