“一篇老文章”
AJAX不能跨域访问是什么意思,我想没有亲自遇到这个问题的人,可能根本就不理解.现在我给出一个例子,让大家体会一下什么是跨域访问.这个页面就是一个HTML文件,源码我附文章后面了.
注:这个页面并不高深,例子只有一个HTML页面,没有引用什么特别的库之类的.例子的目的只是让对AJAX不能跨域访问有一个感性的认识.就好比,你如何告诉一个没见过汽车的人,告诉他什么是汽车,讲半天,还不如直接给个汽车给他看看,他就知道什么是汽车了.但你要他直接给一个清晰的定义,或者是让他明白汽车的动力学,这就是很难的了,也不是本文的目的.
下面这个简单的代码只要复制到一个本地html文件中即可,就可以把任何URL指定的网页显示出来[注1],但是同样的页面,你如果放到tomcat之类的容器下面,就无法打开,甚至通过网络邻居访问都不行.
分析1:为什么好好的页面却得不到期望的结果:
为什么JS语法没有什么问题,放在网络邻居与web容器中就不能正常运行了呢,这就是AJAX所说的不能跨域访问,因为浏览器你这个JS程序是来自容器,它就限制你只能正常访问同一容器里的的资源[注:2],比如你通过http://www.openj.cn访问到一个页面,那么这个页面的JS就只能访问openj.cn的资源,而不能访问www.baidu.com.
为什么IE在通过本地文件能正常运行这个页面的,我是在XP下测试的,可能IE把本地这个域处理成了一个特殊的域,从这个域得到的JS程序,权限可以略微放松些,这样可能易用性就会好些,要知道安全性与使用的方便性可是此消彼长的关系.所以IE选择了易用性,在安全问题上放了一个黄灯,为什么说是黄灯呢,因为它在运行这个页面时,IE会给出一个安全提示,告诉你这个页面存在风险.
分析2:为什么要限制AJAX跨域访问[注3］:
可以肯定的说是出于安全的需要,但我没有找到什么资料明确这个问题分析,我只能通过看其它资料来自己体会了,我自己发现的一个安全问题就是:
AJAX可能会把用户的cookie信息泄漏出去,比如我往别用户的Gmail信箱里面发嵌有JS脚本的邮件.这些脚本读取gmail.com域中的cookies信息,然后通过AJAX发送给我的个人网站,这样我的个人网站就可以得到这个用户的Gmail的cookies.我然后把它提取出来,我就可以不用密码来访问这个用户的Gmail邮箱了.
这个只是我能想到的,我想如果能够让AJAX能够跨域访问的话,肯定还有其它一些安全问题.
注
[1]；对这个测试页面好像只有在一种情况下才能正常执行：就是通过IE打开本地文件。如果用FireFox就算是通过本地文件打开它也不能正常运行。
[2]:为了把问题简单说明,我说了只能访问同一容器里面的资源,实际上是不精确的,真正的还是应该通过域来区分,同一个容器里面的资源也可能是指向不同的域.同一个域的各个资源也可能分布在不同的容器中.比如:tomcat中有好2个虚拟目录,你用不同的域名来指向这两个虚拟目录,这个容器中的两个虚拟目录就是不同的域了.不同容器的资源也可能属于同一个域,比如我申请一个域名:openj.cn,我设置 www.openj.cn指向www.baidu.com,而blog.openj.cn指向www.google.com。这样baidu与google的首页就都属于openj.cn这个域了.
[3]: 本文没有区分AJAX的跨域与JS的跨域，因为AJAX就是通过JS来发现请求的，它们实际上是一回事。
[4]: 在代码中，我定义了变量 var url = 'http://www.google.com'; 你可以把它修改为任何你能访问的地址，
[5]：本文的内容全是自己的瞎体会的，如果有什么不对的有高手发现了，希望大家能指出。这也是本文的主要目的。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD><TITLE>AJAX跨域验证</TITLE>
<script>
var xmlHttp;
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
function hello() {
var url = 'http://www.google.com';
createXMLHttpRequest();
xmlHttp.onreadystatechange = showResponse;
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}
function showResponse(){
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
document.getElementById("result").setAttribute("value",xmlHttp.responseText) ;
}
}
}
</script>
</HEAD>
<BODY>
<input type="button" value="hello" onclick="hello()"><br/><br/>
<textarea id="result" name="result" cols=100 rows=100 ></textarea>
</BODY>
</HTML>
分享到：
相关推荐
CORS 是一种现代浏览器支持的跨域访问机制，通过在服务器端设置特定的 HTTP 头部，允许跨域请求。 ### 7. jQuery、axios 等库的使用 为了简化 Ajax 开发，有许多库提供了更友好的 API，如 jQuery 的 `$.ajax()` 和...
《基于阿里云的语音转文字技术与跨域访问实现》 在现代信息技术中，语音转文字（Automatic Speech Recognition，ASR）技术已经成为人机交互的关键一环，它使得机器能够理解并转换人类的口头语言，极大地提升了用户...
而使用jQuery.form插件，可以将以AJAX形式异步提交表单，不需要跳转页面，这对于用户体验而言是一种提升。使用该插件，开发者可以很容易地通过简单配置实现文件的异步上传。 接下来是跨域上传的核心问题。由于...
8. **跨域问题与解决方案**：由于浏览器的安全策略，JavaScript通常不能跨域访问资源。我们将学习什么是跨域，以及如何通过JSONP、CORS等方式解决跨域限制。 9. **错误处理与调试**：良好的错误处理和调试技巧是...
这种方式可以让IE10以下的浏览器也能实现跨域文件上传。 总的来说，跨域异步上传文件涉及到多个技术和策略，包括jQuery.form插件、CORS、JSONP以及IFrame。理解并掌握这些技术是开发现代Web应用所必需的，尤其是在...
11. **前端限制**：前端可以对文件大小、类型等进行初步检查，但必须注意，这些限制只能作为用户体验优化，不能替代服务器端的安全验证。 12. **兼容性**：无组件上传主要基于HTML5技术，因此需要考虑老版本浏览器...
4. **安全设置**：可能涵盖了如何配置DWR的安全设置，如白名单、跨域限制等，以防止未授权的访问。 5. **错误处理**：如何在DWR调用中处理可能出现的异常，以及客户端和服务器端的错误反馈机制。 6. **最佳实践**...
这使得在客户端就能对图片进行初步处理，如缩略图生成、图片压缩，从而减少上传的数据量，提高上传速度。 3. **AJAX异步上传**：为了提供更好的用户体验，一般会使用AJAX进行异步上传，这样用户在上传过程中不会...
1. 提高用户体验：通过实时验证，用户能立即看到输入错误，无需等待服务器响应。 2. 减轻服务器压力：大部分验证可以在客户端完成，减轻了服务器端的处理负担。 3. 防止恶意攻击：在用户提交数据前进行验证，可以...
8. **跨域问题**：如果前端和后端不在同一域名下，需要处理跨域问题。这通常通过设置`Access-Control-Allow-Origin`等响应头或者JSONP等方式解决。 9. **错误处理**：要考虑到各种可能的错误情况，如文件类型不支持...
9. **UI设计**：良好的用户体验是必不可少的。这包括提供友好的文件选择界面、上传进度指示、错误提示等。 10. **安全性**：确保用户上传的文件不包含恶意代码，避免XSS（跨站脚本攻击）和CSRF（跨站请求伪造）等...
- 跨域问题：当在本地测试时，可能会遇到跨域问题，因为浏览器出于安全考虑限制了对本地文件的访问。这通常需要在服务器上进行调试。 - 图片编码传输问题：在使用AJAX上传图片编码时，编码内的加号可能会被错误地...
考虑到它与前端框架如React、Angular或Vue.js的兼容性，Capstone项目可能采用了其中的一种来提升用户体验，创建组件化的应用结构。 Capstone 490和491可能代表了项目的不同阶段或不同的课程模块。在教育领域，...