下一阵子要做一个网站Web储备一下知识,AJAX 实现跨域请求,估计会用到,以前在学  WebServer  时候老师整理的一个文档,现在便于查阅和使用现在放到我的博客中。

一般平时我写web页面的时候AJAX请求,使用不到这个 跨域, 后来理解一下啥是跨域请求,  自我理解就是 请求其他服务器时才需要这个。

也查了好多文档在网上 但是没有一个比较清楚的认识。只能确定 后台配置 web.config  这个方法。

刚开始学 请指出错误,谢谢。

后台配置跨域请求

在system.web标签中 出入 这一段代码 ,我想一般咱们访问接口的时候 也没有让 去Jsonp 一下

<httpProtocol>

<customHeaders>

<add name="Access-Control-Allow-Origin" value="*" />

<add name="Access-Control-Allow-Headers" value="Content-Type" />

<add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />

</customHeaders>

</httpProtocol>

"Access-Control-Allow-Origin"表明它允许"对所有发起跨域请求

"Access-Control-Allow-Headers"表明它允许跨域请求包含content-type头

"Access-Control-Allow-Methods"表明它允许GET、PUT、DELETE的外域请求

这时候 再用AJAx  POST请求  去访问该API或Controller ,无参的正常访问,有参数书的  记得要用 JSON.stringify()转换以下参数 的类型,否则会报错JSON基元错误。而在webServer 上这个只能使用 Post请求,而无法在使用 get请求需要在 加这个两个 头 然后就只能Get访问

[WebMethod]
[ScriptMethod]

[AcceptVerbs("GET","POST")] 来支持 api接口的 Get Post 都可以访问 ,接受参数 用  FromUriOrBody 此类型实现

针对ASP.NET Web API,除了上面这样的设置,还需要添加一个特殊的设计,就是为每个APIController添加一个OPTIONS的方法,但无需返回任何东西。

public string Options()

{

return null; // HTTP 200 response with empty body

}

JsonP方式跨域

这个 就比较简单的使用 方法,就是在 请求访问的时候 加写一个参数

        $.ajax({
type: "POST",
contentType:"UTF-8",
url:"http://localhost:16021/api/Values/Post",
dataType: 'jsonp',
success: function(data) {
alert(data);
}
});

DataType:“jsonp” 在请求的时候设置为 jsonp 格式,  不过这个方法只支持Get请求,不支持Post的请求,即使 你把Type改为Post   请求的时候还是可以看到改为了Get 请求。

.Net Ajax跨域请求实现的更多相关文章

  1. Laravel中的ajax跨域请求

    最近接触Laravel框架ajax跨域请求的过程中遇到一些问题,在这里做下总结. 一开始发起ajax请求一直报500错误,搜索相关资料后发现Laravel要允许跨域请求可以加入Cors中间件,代码如下 ...

  2. 浅谈linux 下,利用Nginx服务器代理实现ajax跨域请求。

    ajax跨域请求对于前端开发者几乎在任何一个项目中都会用到,众所周知,跨域请求有三种方式: jsonp; XHR2 代理: jsonp: 这种应该是开发中是使用的最多的,最常见的跨域请求方法,其实aj ...

  3. 解决ajax跨域请求 (总结)

    ajax跨域请求,目前已用几种方法实现:   1)用原生js的xhr对象实现.                var url="http://freegeoip.net/json/" ...

  4. ASP.NET MVC 实现AJAX跨域请求方法《1》

    ASP.NET MVC 实现AJAX跨域请求的两种方法 通常发送AJAX请求都是在本域内完成的,也就是向本域内的某个URL发送请求,完成部分页面的刷新.但有的时候需要向其它域发送AJAX请求,完成数据 ...

  5. $.ajax 跨域请求 Web Api

    WepApi确实方便好用,没有配置文件,一个apicontroller直接可以干活了.但今天用$.ajax跨域请求的时候总是获取不到数据,用fiddler一看确实抓到了数据,但回到$.ajax函数中, ...

  6. JQuery的Ajax跨域请求原理概述及实例

    今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式,于是即刻翻出Jquery的API出来研究,发 JQuer ...

  7. Nginx 实现AJAX跨域请求

    在工作中遇到跨域请求的问题: AJAX从一个域请求另一个域会有跨域的问题.那么如何在nginx上实现ajax跨域请求呢?要在nginx上启用跨域请求,需要添加add_header Access-Con ...

  8. jQuery ajax跨域请求的解决方法

    在Ajax应用中,jQuery的Ajax请求是非常容易而且方便的,但是初学者经常会犯一个错误,那就是Ajax请求的url不是本地或者同一个服务器下面的URI,最后导致虽然请求200,但是不会返回任何数 ...

  9. php中ajax跨域请求---小记

    php中ajax跨域请求---小记   前端时间,遇到的一个问题,情况大约是这样: 原来的写法: 前端js文件中: $.ajax({ type:'get', url:'http://wan.xxx.c ...

  10. jquery ajax跨域请求详解

    本文章来给大家详细jquery中的ajax跨域请求, 在JQuery对于Ajax的跨域请求有两类解决方案,不过都是只支持get方式.分别是JQuery的jquery.ajax jsonp格式和jque ...

随机推荐

  1. linux操作系统基础篇(八)

    shell脚本的变量以及正则表达式 一.变量 含义:程序的运行就是一些列状态的变量->用变量值的变化去表示. 命名规则 以字母或下划线开头,剩下的部分可以是:字母.数字.下划线. 最好遵循下述规 ...

  2. shell中条件判断语法与判断条件小结

    1. IF条件判断语法: if Athen   dosthelif B   dosthelse   dosthfi 2. 判断条件:   2.1 字符串判断   str1 = str2 当两个串有相同 ...

  3. python打包exe pyinstaller 简单使用

    源由 最近公司让做了一个小工具,使用python写的,写完之后要求能放在其它电脑上运行,于是就开始寻找方案; 按网上的说法 py2exe已经很久没更新了,资料也不多: 于是就采用pyinstaller ...

  4. jquery.uploadify+spring mvc实现上传图片

    一.前端页面 1.下载jquery.uploadify 去uploadify官网(http://www.uploadify.com/download/)下载压缩包,解压后放在如下路径: 2.html结 ...

  5. 高并发场景 LVS 安装及高可用实现

    1.1 负载均衡介绍 1.1.1 负载均衡的妙用 负载均衡(Load Balance)集群提供了一种廉价.有效.透明的方法,来扩展网络设备和服务器的负载.带宽.增加吞吐量.加强网络数据处理能力.提高网 ...

  6. 查看Page结构

    SQL Server存储数据的基本单元是Page,每一个Page的大小是8KB,数据文件是由Page构成的.在同一个数据库上,每一个Page都有一个唯一的资源标识,标识符由三部分组成:db_id,fi ...

  7. Error when sending message to topic test with key: null, value: 2 bytes with error: (org.apache.kafka.clients.producer.internals.ErrorLoggingCallback)

    windows下使用kafka遇到这个问题: Error when sending message to topic test with key: null, value: 2 bytes with ...

  8. 小程序采坑系列-this.setData

    今天踩了大坑,坑里还都是碎瓶渣子.. 先说一下基本使用.官网也有. 比如说你在main.js里面有这些变量.想修改某些值. data: { main_view_bgcolor: "" ...

  9. 基于 HTML5 Canvas 的 3D 模型贴图问题

    之前注意到的一个例子,但是一直没有沉下心来看这个例子到底有什么优点,总觉得就是一个 list 列表,也不知道右边的 3d 场景放两个节点是要干嘛,今天突然想起来就仔细地看了一下这个例子的代码,实际操作 ...

  10. Python3.6_安装numpy

    刚刚编辑了一次,但是犯了新手都会犯的没保存的错误,第二次编辑可能略有粗糙,如有问题欢迎指正 想用Python 画图,但是我的是vs自动安装的因此缺少许多必要的库,在安装的过程中也是遇到了诸多问题,下面 ...