下一阵子要做一个网站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 请求。