下一阵子要做一个网站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. 利用Pycharm本地调试spark-streaming(包含kafka和zookeeper等操作)

    环境准备就不说了! 第一步:打开Pycharm,在File->Setting->Project Structure中点击Add Content Root 添加本地python调用java和 ...

  2. 如何在ASP.NET Core Web API测试中使用Postman

    使用Postman进行手动测试 如果您是开发人员,测试人员或管理人员,则在构建和使用应用程序时,有时了解各种API方法可能是一个挑战. 使用带有.NET Core的Postman为您的Web API生 ...

  3. 初识Redux-Saga

    Redus-saga是一个redux的中间件,主要用来简便而优雅的处理redux应用里的副作用(side effect相对于pure function这类概念而言的).它之所以可以做到这一点主要是使用 ...

  4. 2017年当下最值得你关注的前端开发框架,不知道你就OUT了!

    近几年随着 jQuery.Ext 以及 CSS3 的发展,以 Bootstrap 为代表的前端开发框架如雨后春笋般挤入视野,可谓应接不暇. 在这篇分享中,我将总结2017年当下最值得你关注的前端开发框 ...

  5. JAVA面试之集合框架(三)

    21.ArrayList和Vector的区别 这两个类都实现了List接口(List接口继承了Collection接口),他们都是有序集合,即存储在这两个集合中的元素的位置都是有顺序的,相当于一种动态 ...

  6. [最短路]P1119 灾后重建

    题目背景 B地区在地震过后,所有村庄都造成了一定的损毁,而这场地震却没对公路造成什么影响.但是在村庄重建好之前,所有与未重建完成的村庄的公路均无法通车.换句话说,只有连接着两个重建完成的村庄的公路才能 ...

  7. 一个页面tab标签切换,都有scroll事件的解决办法

    当前页有多个tab,如果都有scroll事件, 先解绑$(window).off('scroll') 再执行scroll就不可以了,多个标签就不会互相干扰: 给你们个例子: //标签切换    $(' ...

  8. 网页的居中显示,使用了margin、clear:both

    很久没写过页面了,现在写起来也觉得捡起来还是挺快的. 当时遇到了这样的问题,我有一个大的div包涵了整个网站,有网页头部,中部还有底部.头部就是一个标题,中部就是几张图片跟文字排版,结果左右两边的图片 ...

  9. kvm虚拟机管理 系统自动化安装

    原创博文安装配置KVM http://www.cnblogs.com/elvi/p/7718574.htmlweb管理kvm http://www.cnblogs.com/elvi/p/7718582 ...

  10. uva11636-Hello World!

    题意:已知有一行printf(“Hello World!”\n);以后就可以复制,问多少次之后就可以达到所需要的行数. 题解:模拟: #include<iostream> #include ...