下一阵子要做一个网站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. [转载] Netty教程

    转载自http://blog.csdn.net/kobejayandy/article/details/11493717 先啰嗦两句,如果你还不知道Netty是做什么的能做什么.那可以先简单的搜索了解 ...

  2. Google Python编程规范

    http://pan.baidu.com/s/1dD1Ra7J 其他语言的编程风格: http://zh-google-styleguide.readthedocs.org/en/latest/

  3. 使用 Rust 构建分布式 Key-Value Store

    欢迎大家前往腾讯云社区,获取更多腾讯海量技术实践干货哦~ 引子 构建一个分布式 Key-Value Store 并不是一件容易的事情,我们需要考虑很多的问题,首先就是我们的系统到底需要提供什么样的功能 ...

  4. 使用dropwizard(3)-加入DI-dagger2

    前言 习惯了Spring全家桶,对spring的容器爱不释手.使用dropwizard,看起来确实很轻,然而,真正使用的时候不得不面临一个问题.我们不可能一个resource就能把所有的业务逻辑囊括! ...

  5. C#设计模式之十五命令模式(Command Pattern)【行为型】

    一.引言   今天我们开始讲"行为型"设计模式的第二个模式,该模式是[命令模式],又称为行动(Action)模式或交易(Transaction)模式,英文名称是:Command P ...

  6. lua lua解读

    1.线程状态宏定义(thread status) #define LUA_OK 0 #define LUA_YIELD 1 #define LUA_ERRRUN 2 #define LUA_ERRSY ...

  7. LogCook 一个简单实用的Android日志管理工具

    众所周知,日志的管理是软件系统很重要的一部分,千万不可忽略其重要性.完整的日志将会在系统维护中起着异常重要的作用,就好像磨刀不误砍柴工一样,日志就像对系统进行分析的工具,工具便捷了,对系统分析起来就能 ...

  8. unity中.meta提交错误操作导致空脚本

    工作时遇到了一个奇葩的问题,同事做的界面,再策划那里死活无法运行,其他同事的都没有问题.简单一查,是界面上挂了个空脚本,但是同事提交了对应的脚本,其他人那里脚本是正常.随后想到是否是.meta的问题. ...

  9. Python中的列表操作

    Python的列表操作可谓是功能强大且方便(相对于Java)简单.常规的操作就不说了(这不是一个入门教程),介绍几个很有特点的例子 添加 # 追加到结尾(append) li = [1, 2, 3, ...

  10. heartbeat+DRBD 高可用 双机热备

    heartbeat+DRBD 高可用 双机热备 原创博文http://www.cnblogs.com/elvi/p/7658109.html ## heartbeat+DRBD 高可用 双机热备 # ...