[转]Ajax跨域请求
一.编一个服务器端servlet
@RequestMapping("/haha")
@ResponseBody
String haha(String haha, HttpServletRequest req, HttpServletResponse resp) {
//resp.addHeader("Access-Control-Allow-Origin", "null");
System.out.println(haha);
System.out.println("you accessed!!!");
return haha + " : " + req.getMethod();
}
如果服务器回复的头部Access-Control-Allow-Origin属性中包含请求的Origin,那么客户端就可以通过ajax访问.
我用的是spring mvc,如果RequestMapping不带参数,默认为'/',相当于映射一切url;如果请求的url找不到,那就去找它.
无参数的RequestMapping只允许有一个,否则无法部署,报错.因为最后兜底的只能有一个servlet.
在spring mvc中,如果没有规定请求方式,默认是都可以,无论是get还是post都能够找到资源,只要url正确就行.
二.ajax方式请求
1.如果设置了头部就会出错(ajax设置了headers就会出错)
Response to preflight request doesn't pass access control check:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'null' is therefore not allowed access. The response had HTTP status code 403.
preflight意为起飞前,航前,pre 在...之前,flight航班
请求在起飞前没有通过,请求被扼杀在摇篮里.
2.如果不设置头部,可以把请求发送出去
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'null' is therefore not allowed access.
下面用ajax请求这个servlet
<body>
<h1 id='resp'></h1>
<input id='haha' type='text'></input>
</body>
<script type="text/javascript">
$('#haha').keydown(function(event) {
console.log(event.which)
if(event.which==13){
$.get('http://localhost:8080/news/haha',{'haha':'wyf'},function(data){
console.log(data)
console.log('get over')
})
}
});
</script>
服务器端输出了"you succeed!!!",这说明对于跨域请求服务器是搭理了的,问题出在服务器禁止返回或者是浏览器不允许用户查看返回的内容.
据我猜测,很有可能是后者,即:chrome分析返回结果,发现跨域了,于是不让用户看了.
如果用java代码通过httpclient或者urlConnection来实现,是能够收到回复的.所以很有可能,结果返回来了,浏览器不让看.
三.解决方案之修改服务器
只需要在服务器上添加一句允许Origin就可以了,如果允许任何一个网站访问,那么就设置为'*'就可以了.
resp.addHeader("Access-Control-Allow-Origin", "null");
四.解决方案之虚拟表单
解决方案很简单:编一个表单进行提交,因为只有ajax才存在跨域访问问题,而提交表单跟ajax不一样.
提交表单之后服务器端决定了浏览器端页面的跳转,把权力完全交给了服务器,而ajax只是通过服务器获取数据
下面的表单是可以提交成功的
<form action='http://localhost:8080/news/haha' method="GET">
<input id='haha' type='text'></input>
<input type="submit"></input>
</form>
可是填写表单太麻烦,于是可以虚拟表单并提交
$(document).ready(function(){
var form=$('<form></form>')
$(form).attr({"action":'http://localhost:8080/news/haha',"method":'post'}).append("<input name='haha' value='haha weidiao'>")
$(form).submit()
console.log('haha')
})
五.同源策略
同源策略(Same-Origin Policy)阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性。如果它们的协议、端口（如果指明了的话）和主机名都相同。则他们属于同源。
同源策略就是禁止外人访问我的资源,是一种安全机制.它是浏览器采用的策略.
六.jsonp
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Test Jsonp</title>
<script type="text/javascript">
function jsonpCallback(result)
{
alert(result.msg);
}
</script>
<script type="text/javascript" src="http://test.com/test.php?jsonp=jsonpCallback"></script>
</head>
<body>
</body>
</html> 服务端的代码:
<?php
echo $_GET['jsonp']."({msg:'this is json data'})";
?>
从JSONP的原理来看的话，script标签只能GET方式。还有就是后台程序需要对callback参数进行有效性过滤，不然恶意用户可以插入攻击代码了。一般使用正则：
^[a-z0-9_]+$
来判断用户的回调函数名是否合法。
七.浏览器不让看
chrome 等浏览器 对于 跨域请求并要求设置Headers自定义参数的时候的 "预请求" 就是如果遇到 跨域并设置headers的请求，所有请求需要两步完成！
A 第一步：发送预请求 OPTIONS 请求。此时 服务器端需要对于OPTIONS请求作出响应 一般使用202响应即可 不用返回任何内容信息。
B 第二步：服务器accepted 第一步请求后 浏览器自动执行第二步 发送真正的请求。此时 大多数人 会发现请求成功了，但是 有那么几个人会发现 请求成功了但是没有任何信息返回 why？因为你自定义的请求头在服务器响应中不存在！
[转]Ajax跨域请求的更多相关文章
- Laravel中的ajax跨域请求
最近接触Laravel框架ajax跨域请求的过程中遇到一些问题,在这里做下总结. 一开始发起ajax请求一直报500错误,搜索相关资料后发现Laravel要允许跨域请求可以加入Cors中间件,代码如下 ...
- 浅谈linux 下，利用Nginx服务器代理实现ajax跨域请求。
ajax跨域请求对于前端开发者几乎在任何一个项目中都会用到,众所周知,跨域请求有三种方式: jsonp; XHR2 代理: jsonp: 这种应该是开发中是使用的最多的,最常见的跨域请求方法,其实aj ...
- 解决ajax跨域请求 （总结）
ajax跨域请求,目前已用几种方法实现: 1)用原生js的xhr对象实现. var url="http://freegeoip.net/json/" ...
- ASP.NET MVC 实现AJAX跨域请求方法《1》
ASP.NET MVC 实现AJAX跨域请求的两种方法 通常发送AJAX请求都是在本域内完成的,也就是向本域内的某个URL发送请求,完成部分页面的刷新.但有的时候需要向其它域发送AJAX请求,完成数据 ...
- $.ajax 跨域请求 Web Api
WepApi确实方便好用,没有配置文件,一个apicontroller直接可以干活了.但今天用$.ajax跨域请求的时候总是获取不到数据,用fiddler一看确实抓到了数据,但回到$.ajax函数中, ...
- JQuery的Ajax跨域请求原理概述及实例
今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式,于是即刻翻出Jquery的API出来研究,发 JQuer ...
- Nginx 实现AJAX跨域请求
在工作中遇到跨域请求的问题: AJAX从一个域请求另一个域会有跨域的问题.那么如何在nginx上实现ajax跨域请求呢?要在nginx上启用跨域请求,需要添加add_header Access-Con ...
- jQuery ajax跨域请求的解决方法
在Ajax应用中,jQuery的Ajax请求是非常容易而且方便的,但是初学者经常会犯一个错误,那就是Ajax请求的url不是本地或者同一个服务器下面的URI,最后导致虽然请求200,但是不会返回任何数 ...
- php中ajax跨域请求---小记
php中ajax跨域请求---小记 前端时间,遇到的一个问题,情况大约是这样: 原来的写法: 前端js文件中: $.ajax({ type:'get', url:'http://wan.xxx.c ...
- jquery ajax跨域请求详解
本文章来给大家详细jquery中的ajax跨域请求, 在JQuery对于Ajax的跨域请求有两类解决方案,不过都是只支持get方式.分别是JQuery的jquery.ajax jsonp格式和jque ...
随机推荐
- ubuntu下nginx+php5的部署
ubuntu下nginx+php5环境的部署和centos系统下的部署稍有不同,废话不多说,以下为操作记录:1)nginx安装root@ubuntutest01-KVM:~# sudo apt-get ...
- .net混淆、反编译工具调查
常用的工具列表[比较常见的] 混淆器.加密 Dotfuscator VS默认带的工具,不过是个社区版 强度不大 dotNET Reactor 使用了NativeCode 和混淆的形式 Xenocode ...
- HP PCS 云监控大数据解决方案
——把数据从分散统一集中到数据中心 基于HP分布式并行计算/存储技术构建的云监控系统即是通过“云高清摄像机”及IaaS和PaaS监控系统平台,根据用户所需(SaaS)将多路监控数据流传送给“云端”,除 ...
- SQLServer 分布式查询MySQL
这学期开了分布式数据库这门课,开始编程实现,今天调试了一早上,写下此配置文件方便查询. 本文实现的是SQLServer2008 Express 链式添加MySql-5.6.10数据库,进行远程操作. ...
- 利用performance属性查看网页性能
一般我们可以通过浏览器的调试工具-网络面板,或者代理工具查看网页加载过程中的各个阶段的耗时.而利用window.performance属性则可以获得更为精确的原始数据,以毫秒为单位,精确到微秒. pe ...
- 用python代码做configure文件
在lua中,我一直用lua作为config文件,或者承载数据的文件 - 好处是lua本身就很好阅读,然后无需额外写解析的代码,还支持在configure文件中读环境变量,条件判断等,方便又强大! (在 ...
- 金山快盘+TortoiseSVN构建版本控制仓库
金山会盘+TortoiseSVN构建版本控制仓库 之前写过一篇文章介绍 如何利用花生壳和VisualSVN Server建立远程代码仓库,具体请参照: <如何利用花生壳和VisualSVN Se ...
- 多态、GC、Java数据类型
多态 一.java中实现多态的机制是什么? 靠的是: 父类定义的引用变量可以指向子类的实例对象,或者接口定义的引用变量可以指向具体实现类的实例对象 而程序调用的方法,在运行期才动态绑定, 它就是引用变 ...
- C/C++实践笔记 003
数据结构与算法程序=数据结构+算法语言是一种工具语言工具(c,c++)--程序设计方法(面向过程.面向对象)——数据结构(二叉树.队列.栈.红黑树.链表……)——算法(快速排序算法.冒泡排序算法.选择 ...
- DOM Document节点类型详解
在前面 DOM 概况 中,我们知道了 DOM 总共有 12 个节点类型,今天我们就来讲下 DOM 中最重要的节点类型之一的 document 节点类型. 1.概况 Javascript 通过 Docu ...