AJAX使用XMLHttpRequest访问跨域问题解决
- 格式:doc
- 大小:57.00 KB
- 文档页数:2
AJAX跨域访问的解决方法Javascscript:使用web代理解决XMLHttpRequest跨域调用问题XMLHttpRequest对象(IE、Firefox中的XMLHTTP对象)是当今尤其是ajax的web 应用程序的核心.但实际上,使用此对象来编写客户端web应用程序会在跨域的网络连接上受到web浏览器的严重限制.为什么需要一个代理web浏览器在网络连接的时候会强制执行一个安全限制,其中就包括调用XMLHttpRequest。
此安全限制阻止脚本或者应用程序连接任何其他的不是来自本域的web服务(IE下可通过修改开启选项来允许跨域请求).如果你的web程序和程序使用的XML数据来自同一服务器,那不会有问题。
但是,如果你访问一个web服务器,而web服务器返回页面请求另外一个如Yahoo! Web Service这样的服务器,那么这个访问就会受到限制。
这个问题有很多解决方案,最通用的就是在你的web服务器上安装一个代理.你可以通过调用自己的web服务代理来代替直接调用其它服务器上的web服务,通过代理发起XMLHttpRequest请求,然后代理传递请求到web服务,并且返回客户端应用程序所需要的数据。
因为所有数据来自你自己的服务器,所以你的浏览器不会受到什么限制。
出于安全考虑,你web服务器上安装的任何代理被限制使用是一个好主意.转发连接到任意网站url的开放式代理会被滥用。
尽管很难限制连接只能来自你自己的应用程序,但是你可以阻止代理去连接那些你没有指定的服务器. Hard code the URL to connect to in the proxy itself 或者提供限制选项.这可以使得代理对不是你的客户端应用程序的用户较低的开放和较少的应用。
其他解决方案除了通过使用web代理来转发应用程序的服务数据外,还有其他几种方式来绕过浏览器的跨域限制.∙使用阿帕奇的mod_rewrite or mod_proxy来从你的服务器上转发到另外的服务器.在你的客户端代码中你只要做请求就可以了,就好象工作在你自己的服务器上-------不会有浏览器的限制问题.然后阿帕奇会神奇的为你请求其他服务器.∙使用json或者动态<script>标记来替代xml和XMLHttpRequest.你可以通过直接在<script>标记内发送你的web服务请求,这样就可以完全绕过浏览器的安全限制.你使用的yahoo服务能够输出JSON(使用output=json和callback=function参数),当页面加载完成后从web服务返回的数据已经被优化为javascript对象.参见JSON Documentation.∙对你的脚本进行数字签名.在FireFox中,你可以为你的脚本和那些信任站点的脚本申请一个数字签名.这样FireFox就会允许你通过XMLHttpRequest访问任何的域.但是,其他浏览器不支持这种方式的脚本签名,所以,这种解决方案会受限.。
ajax跨域、iframe跨域和JS跨域通信的几种解决方案1.什么引起了ajax跨域不能的问题ajax本身实际上是通过xmlhttprequest对象来进行数据的交互,而浏览器出于安全考虑,不允许js代码进行跨域操作,所以会警告。
2.有什么完美的解决方案么?没有。
解决方案有不少,但是只能是根据自己的实际情况来选择。
具体情况有:一、本域和子域的相互访问: 和二、本域和其他域的相互访问: 和 用iframe三、本域和其他域的相互访问: 和 用xmlhttprequest访问代理四、本域和其他域的相互访问: 和 用js创建动态脚本解决方法:一、如果想做到数据的交互,那么和 必须由你来开发才可以。
可以将用iframe添加到的某个页面下,在和iframe里面都加上document.domain = "",这样就可以统一域了,可以实现跨域访问。
就和平时同一个域中镶嵌iframe一样,直接调用里面的js就可以了。
(这个办法我没有尝试,不过理论可行)二、当两个域不同时,如果想相互调用,那么同样需要两个域都是由你来开发才可以。
用iframe可以实现数据的互相调用。
解决方案就是用window.location对象的hash属性。
hash属性就是http://domian/web /a.htm#dshakjdhsjka 里面的#dshakjdhsjka。
利用js改变hash值网页不会刷新,可以这样实现通过js访问hash值来做到通信。
不过除了ie之外其他大部分浏览器只要改变hash就会记录历史,你在前进和后退时就需要处理,非常麻烦。
不过再做简单的处理时还是可以用的,具体的代码我再下面有下载。
大体的过程是页面a和页面b在不同域下,b通过iframe添加到a里,a通过js修改iframe的hash值,b里面做一个监听(因为js只能修改hash,数据是否改变只能由b自己来判断),检测到b的hash值被修改了,得到修改的值,经过处理返回a需要的值,再来修改a的hash值(这个地方要注意,如果 a 本身是那种查询页面的话比如http://domian/web/a.aspx?id=3,在b中直接parent.window.location是无法取得数据的,同样报没有权限的错误,需要a把这个传过来,所以也比较麻烦),同样a里面也要做监听,如果hash变化的话就取得返回的数据,再做相应的处理。
前端Ajax跨域解决⽅案本地环境请看另⼀篇博⽂:业务场景:前后端分离需要对接数据接⼝。
接⼝测试是在postman做的,今天才开始和前端对接,由于这是我第⼀次做后端接⼝开发(第⼀次嘛,问题⽐较多)所以在此记录分享我的踩坑之旅,以便能更好的理解,应⽤。
问题:前端ajax请求后端接⼝出现跨域问题,如下图。
翻译:因为响应头没有"Access-Control-Allow-Origin",所以接⼝拒绝把数据返回给前端。
什么是Access-Control-Allow-Origin?Access-Control-Allow-Origin是HTML5中定义的⼀种解决资源跨域的策略。
浏览器只允许请求当前域的资源,⽽对其他域的资源表⽰不信任。
那怎么才算跨域呢?请求协议http,https的不同域domain的不同端⼝port的不同其实说简单点,跨域,指的就是浏览器不能执⾏其他⽹站的脚本。
它是由浏览器的同源策略造成的,是浏览器施加的安全限制。
同源是指:协议相同,域名相同,端⼝相同。
三者同时成⽴才能叫同源。
浏览器的同源策略从它诞⽣的那⼀刻就出现了,具体是指从域名A下的⼀个页⾯(⼀般是通过ajax请求)获取域名B下的⼀个资源,是不被浏览器允许的。
跨域资源共享(CORS)是浏览器提供的⼀种跨域协商机制,让前后端协商是否可以发出跨域请求。
CORS添加了若⼲Access-controll-request-xxx 的头,给客户端声明⾃⼰的源、要使⽤的头部、⽤使⽤的请求⽅法;添加了若⼲Access-Controll-Allow-xxx的头,给服务端声明⾃⼰⽀持跨域的源、头部和⽅法。
URL说明是否允许通信/a.js/b.js同⼀域名下允许/lab/a.js/script/b.js同⼀域名下不同⽂件夹允许:8000/a.js/b.js同⼀域名,不同端⼝不允许/a.jshttps:///b.js同⼀域名,不同协议不允许/a.jshttp://70.32.92.74/b.js域名和域名对应ip不允许/a.js/b.js主域相同,⼦域不同不允许/a.js/b.js同⼀域名,不同⼆级域名(同上)不允许(cookie这种情况下也不允许访问)/a.js/b.js不同域名不允许两种解决⽅案(从后端开始解决)⼀、1、后端返回Jsonp格式的数据,在Json格式的基础上包上⼀层:handleCallback():handleCallback({"status": true, "code": "200"})==>response.getWriter().write("handleCallback({\"status\": false, \"code\": \"500\"})");2、前端ajax接收返回:var userName=$("#userName").val();var str_data={"UserName":userName};$.ajax({type: 'get',async : false,dataType: 'jsonp', //设置返回的类型时Jsonp类型url: "http://localhost:8078/springBoot/User",jsonpCallback: "handleCallback", //关键:回调函数名,与后端⼀致data:str_data,success: function(result){console.log(result.code);},error:function(result){console.log("error");}});⼆、1、后端直接设置Reponse允许跨域访问public void UploadUserAvatars(HttpServletRequest request,HttpServletResponse response) throws Exception{ // 指定允许其他域名访问response.addHeader("Access-Control-Allow-Origin","*");// 响应类型response.addHeader("Access-Control-Allow-Methods","POST");// 响应头设置response.addHeader("Access-Control-Allow-Headers","x-requested-with,content-type");//响应内容⽀持中⽂response.setContentType("text/html;charset=utf-8");}。
详解ajax跨域问题解决⽅案今天来记录⼀下关于ajax跨域的⼀些问题。
以备不时之需。
跨域同源策略限制同源策略阻⽌从⼀个域上加载的脚本获取或操作另⼀个域上的⽂档属性。
也就是说,受到请求的 URL 的域必须与当前 Web页⾯的域相同。
这意味着浏览器隔离来⾃不同源的内容,以防⽌它们之间的操作。
解决⽅式通常来说,⽐较通⽤的有如下两种⽅式,⼀种是从服务器端下⼿,另⼀种则是从客户端的⾓度出发。
⼆者各有利弊,具体要使⽤哪种⽅式还需要具体的分析。
1. 服务器设置响应头2. 服务器代理3. 客户端采⽤脚本回调机制。
⽅式⼀Access-Control-Allow-Origin 关键字只有在服务器端进⾏设置才会⽣效。
也就是说即使再客户端使⽤xmlhttprequest.setHeaderREquest('xx','xx');也不会有什么效果。
正常ajax请求下⾯来模拟⼀下ajax⾮跨域请求的案例实现。
test1.html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>ajax 测试</title></head><body><input type="button" value="Test" onclick="crossDomainRequest()"><div id="content"></div><script>var xhr = new XMLHttpRequest();var url = 'http://localhost/learn/ajax/test1.php';function crossDomainRequest() {document.getElementById('content').innerHTML = "<font color='red'>loading...</font>";// 延迟执⾏setTimeout(function () {if (xhr) {xhr.open('GEt', url, true);xhr.onreadystatechange = handle_response;xhr.send(null);} else {document.getElementById('content').innerText = "不能创建XMLHttpRequest对象";}}, 3000);}function handle_response() {var container = document.getElementById('content');if (xhr.readyState == 4) {if (xhr.status == 200 || xhr.status == 304) {container.innerHTML = xhr.responseText;} else {container.innerText = '不能跨域请求';}}}</script></body></html>同级⽬录下的test1.PHP内容如下:<?phpecho "It Works.";>跨域请求刚才是HTML⽂件和php⽂件都在Apache的容器下,所以没有出现跨域的情形,现在把HTML⽂件放到桌⾯上,这样再次请求PHP数据的话,就营造了这样⼀个“跨域请求”了。
ajax跨域请求解决方案
《Ajax跨域请求解决方案》
随着互联网的发展,前端开发越来越受到重视,而Ajax作为
前端开发不可或缺的技术之一,也经常遇到跨域请求的问题。
跨域请求是指在浏览器的同源策略下,不同源之间的请求会受到限制,这给前端开发带来了一些挑战。
针对跨域请求的问题,前端开发人员们一直在探索各种解决方案。
其中比较常见的解决方案包括JSONP、CORS、代理服务
器等。
JSONP是一种跨域解决方案,通过动态创建<script>标签,并
指定src属性为目标服务器的接口地址,实现跨域请求。
不过JSONP只支持GET请求,且存在安全性问题,因此使用时需
谨慎。
CORS(Cross-Origin Resource Sharing)是W3C提出的一种跨
域解决方案,它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了Ajax只能同源使用的限制。
开发人员可以在服务端设置相关的头部信息,允许跨域请求。
不过CORS的兼容性不是很好,有些老版本的浏览器不支持。
另外一种跨域请求解决方案是通过代理服务器,即在同源服务器上部署一个代理,用来转发跨域请求。
这种方法相对来说比较简单,而且可以解决各种跨域问题,但也存在请求转发效率低、维护成本高等问题。
综上所述,针对Ajax跨域请求的解决方案有多种选择,开发人员可以根据具体情况选择最合适的方案。
同时,随着前端技术的不断发展,相信未来会有更多更好的解决方案出现,让前端开发变得更加便捷和高效。
XmlHttpRequest使⽤及“跨域”问题解决⼀. IE7以后对xmlHttpRequest 对象的创建在不同浏览器上是兼容的。
下⾯的⽅法是考虑兼容性的,实际项⽬中⼀般使⽤Jquery的ajax请求,可以不考虑兼容性问题。
function getHttpObject() {var xhr=false;if (windows.XMLHttpRequest)xhr=new XMLHttpRequest();else if (window.ActiveXObject){xhr=new ActiveXObject("Microsoft.XMLHttp");}return xhr;}⼆. XMLHttpRequest的属性及⽅法1、⽅法描述abort() 停⽌当前请求getAllResponseHeaders() 把HTTP请求的所有响应⾸部作为键/值对返回getResponseHeader(“header”) 返回指定键的⾸部串值open(“method”,”url”) 建⽴对服务器的调⽤,Method可以是GET,POST或PUT,URL可以是相对或绝对URL send(content)向服务器发送请求setRequestHeader(“header”,”value”) 把指定⾸部设置为所提供的值。
在设置任何⾸部之前必须调⽤open()2、属性描述onreadystatechange 每个状态改变都会触发,通常会调⽤⼀个javascript函数readyState 请求的状态,5个值; 0:为初始化,1:正在加载;2:已经加载,3:交互中,4:完成responseText 服务器的响应,表⽰为字符串responseXML 服务器的响应,表⽰为XML,可以解析为DOM对象status 服务器的HTTP状态码(200:ok,304:not modified,404:Not Found 等)statusText Http状态码的相应⽂本(ok或Not Found)3、⼿写⼀个Ajax请求的例⼦:eg1: get$(function(){$("#id").onclick(tunction(){var request=new XMLHttpRequest();var url="";var method="GET";request.open(method,url);request.send(null);request.onreadystatechange=function(){if (request.readyState==4&&(request.status==200 || request.status==304))alert (request.reponseText);//如果返回的是html 标签,则可以使⽤ //$(“#id2”).innerHtml=request.reponseText;//如果返回的xml格式,则需要将结果通过getElementByTagName(“”)[index]解析 //alert(request.reponseXML.getElementByTagName(“”)[index]) /*var type=request.getResponseHeader("Content-Type");if(type.indexOf("xml") !== -1 && request.responseXML){callback(request.responseXML); //Document对象响应}else if(type=== 'application/json'){callback(JSON.parse(request.responseText)) //JSON响应}else {callback(request.responseText);}*/} }) })eg2: post<script type="text/javascript">var xhr = new XMLHttpRequest();xhr.timeout = 3000;xhr.ontimeout = function (event) {alert("请求超时!");}var formData = new FormData();formData.append('tel', '182********');formData.append('psw', '111111');xhr.open('POST', ':8000/login');xhr.send(formData);xhr.onreadystatechange = function () {if (xhr.readyState == 4 && xhr.status == 200) {alert(xhr.responseText);}else {alert(xhr.statusText);}}</script>eg3:同步响应//同步响应//发起同步的HTTP GET请求以获得指定URL的内容//返回响应⽂本,或如果请求不成功或响应不是⽂本就报错。
38软件开发与应用Software Development And Application电子技术与软件工程Electronic Technology & Software Engineering随着计算机网络的发展与普及,网站设计与开发是现在非常热门的一个行业。
前后端分离开发方式已成为网站开发的主流开发方式。
前后端代码分离导致了Ajax 请求时的跨域访问问题,本文就Ajax 访问机制、Ajax 跨域访问问题产生的原因以及解决方案进行了深入的分析与研究。
1 Ajax访问机制在传统的web 开发技术中,加载或者刷新数据需要重新请求页面,会造成网页进行重新加载,从而刷新整个页面。
Ajax(Asynchronous JavaScript & XML)是一种新的web 开发技术,通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。
这意味着可以在不重新加载整个网页的情况下,对网页的数据进行更新,使得用户体验更好。
Ajax 的请求步骤如下:(1)创建XMLHttpRequest 对象,也就是创建一个异步调用对象;(2)创建一个新的HTTP 请求,并指定该HTTP 请求的方式、URL 及验证信息;(3)设置响应HTTP 请求状态变化的函数;(4)发送HTTP 请求;(5)获取异步调用返回的数据;(6)使用JavaScript 和DOM 实现局部刷新。
2 前后端分离开发技术现在前后端分离开发技术已成为网站开发的主流发展方向。
前后端分离开发即网站开发前台代码(HTML 和JavaScript )和后台代码(本文中采用PHP)独立开发,前后端代码可放在同一个服务器上,也可分布于不同的服务器上。
后端代码负责提供数据接口(以下简称API )用于完成数据处理和交互,前台使用Ajax 技术请求后台API ,来实现网站功能、以及数据交互。
前后端分离开发技术可以使得前后端代码同时开发,提高开发效率,同时易于排错,扩展性好。
最近公司内部的architecture组正在热烈讨论ajax,最后难免会谈到如何跨域这个问题,因为从ajax诞生那天起,xmlHttprequest对象在firefox下不能跨域请求的问题就一直存在,等待浏览器们去解决这个问题显然不太现实,聪明的web开发人员们早就想了一系列的方法来解决这个问题,下面列举几个比较不错的方法:1. 使用中间层过渡的方式:中间过渡,很明显,就是在ajax与不同域的服务器进行通讯的中间加一层过渡,这一层过渡可以是php、jsp、c++等任何具备网络通讯功能的语言,由中间层向不同域的服务器进行读取数据的操作。
拿php做一个例子,如果需要对不同域的某一个php进行通讯,现在客户端的xmlhttprequest先query本域的一个php,然后由本域的这个php去和不同域的php进行通讯,然后由本域的php输出response;2. 使用<script>标签这个方法是利用<script>标签中的src来query一个php获得response,因为<script>标签的src属性不存在跨域的问题。
举个例子来让大家看得更清楚一点吧:1.<script LANGUAGE="Javascript"src=""id="get">2.</script>3.<script LANGUAGE="Javascript">4.<!--5.function get(url)6.{7.var obj = document.getElementById("get");8.obj.src = url;9.(obj.readStatus == 200)10.{11.alert(param);12.}13.}14.function query()15.{16.get(get.php);17.}18.//-->19.</script>20.<BODY>21.<INPUT TYPE="button"value="CLICK ME"onclick="query()">22.</BODY>23.</HTML>其中get.php的代码是1.<?php2.echo"var param = ''";3.?>最后的运行结果是,当你点击那个button,它会出现一个内容为””的对话框。
iframe跨域访问cookie和session的解决方法一、问题背景介绍随着互联网技术的不断发展,前端页面中的IFrame变得越来越普遍。
然而,IFrame在跨域访问时,会遇到Cookie和Session无法传递的问题。
这个问题在一定程度上限制了网页的功能和用户体验。
为了解决这个问题,本文将介绍几种常见的解决方法。
二、IFrame跨域访问原理IFrame本质上是一个浏览器窗口,它与其他域的页面进行交互时,会受到同源策略的限制。
同源策略是指浏览器为了保护用户信息安全,限制来自不同源的页面之间的交互。
在这种情况下,Cookie和Session无法跨域传递,从而导致了一系列问题。
三、解决方案1.服务端设置Cookie和Session为了解决跨域问题,可以在服务端设置Cookie和Session。
当用户访问某个页面时,服务器会为其分配一个唯一的Session ID。
然后将这个Session ID存储在Cookie中,以便下次访问时使用。
这样,即使用户通过IFrame访问其他域的页面,也可以保证Session的连续性。
2.使用JSONP技术JSONP(JSON with Padding)是一种跨域通信的技术。
它通过在HTML 标签中插入一个script标签,来实现跨域数据传输。
JSONP的优势在于它不需要修改服务器端的代码,只需在客户端修改即可。
但是,JSONP只支持GET请求,不支持POST请求。
3.使用代理服务器代理服务器是一种在客户端和服务器之间进行数据传输的中间服务器。
通过使用代理服务器,可以绕过浏览器的同源策略,实现跨域访问。
在服务器端,可以将Cookie和Session存储在代理服务器上,然后在客户端通过Ajax 请求获取数据。
4.使用Ajax进行跨域通信Ajax(Asynchronous JavaScript and XML)是一种异步的Web开发技术。
通过Ajax,可以实现在不刷新页面的情况下,与服务器进行数据交互。
jquery中ajax处理跨域的三⼤⽅式由于JS同源策略的影响,因此js只能访问同域名下的⽂档。
因此要实现跨域,⼀般有以下⼏个⽅法:⼀、处理跨域的⽅式:1.代理2.XHR2HTML5中提供的XMLHTTPREQUEST Level2(及XHR2)已经实现了跨域访问。
但ie10以下不⽀持只需要在服务端填上响应头:header("Access-Control-Allow-Origin:*");/*星号表⽰所有的域都可以接受,*/header("Access-Control-Allow-Methods:GET,POST");3.jsonP原理:ajax本⾝是不可以跨域的,通过产⽣⼀个script标签来实现跨域。
因为script标签的src属性是没有跨域的限制的。
其实设置了dataType: 'jsonp'后,$.ajax⽅法就和ajax XmlHttpRequest没什么关系了,取⽽代之的则是JSONP协议。
JSONP是⼀个⾮官⽅的协议,它允许在服务器端集成Script tags返回⾄客户端,通过javascript callback的形式实现跨域访问。
ajax的跨域写法:(其余写法和不跨域的⼀样):⽐如/*当前⽹址是localhost:3000*/js代码$.ajax({type:"get",url:"http://localhost:3000/showAll",/*url写异域的请求地址*/dataType:"jsonp",/*加上datatype*/jsonpCallback:"cb",/*设置⼀个回调函数,名字随便取,和下⾯的函数⾥的名字相同就⾏*/success:function(){。
}});/*⽽在异域服务器上,*/app.jsapp.get('/showAll',students.showAll);/*这和不跨域的写法相同*//*在异域服务器的showAll函数⾥,*/var db = require("./database");exports.showAll = function(req,res){/**设置响应头允许ajax跨域访问**/res.setHeader("Access-Control-Allow-Origin","*");/*星号表⽰所有的异域请求都可以接受,*/res.setHeader("Access-Control-Allow-Methods","GET,POST");var con = db.getCon();con.query("select * from t_students",function(error,rows){if(error){console.log("数据库出错:"+error);}else{/*注意这⾥,返回的就是jsonP的回调函数名+数据了*/res.send("cb("+JSON.stringify(r)+")");}});}⼆、解决ajax跨域访问、 JQuery 的跨域⽅法JS的跨域问题,我想很多程序员的脑海⾥⾯还认为JS是不能跨域的,其实这是⼀个错误的观点;有很多⼈在⽹上找其解决⽅法,教其⽤IFRAME去解决的⽂章很多,真有那么复杂吗?其实很简单的,如果你⽤JQUERY,⼀个GETJSON⽅法就搞定了,⽽且是⼀⾏代码搞定。
ajax跨域的解决办法Ajax域是一个重要的web发问题,它会影响 Web用程序的可用性和性能,而不能在安全环境中访问资源,或者在跨域请求时出现问题。
Ajax域的定义是在不同域中的 Web用程序向同一服务器发出请求。
这也称为跨站点请求,因为它是在两个不同的域上发生的,如果不采取相应的措施,浏览器会阻止这种跨域请求。
Ajax域的出现有很多原因,比如浏览器的安全问题,同源策略,以及不允许跨域访问,以及多个 Web务器和客户端之间的问题等等。
Ajax域有多种解决方法,其中最常见的方法包括:1. JSONP(JSON with Padding):这种方法的思路是,利用 <script>签的 src性的跨域加载数据,而不是用 XMLHttpRequest象发出跨域请求。
JSONP方法比较简单,实现上也比较方便,但需要服务器端额外支持,而且也不能在 POST 式下调用。
2.服务器端设置跨域策略:服务器端设置跨域策略,就是利用 HTTP中的特殊字段及其相关属性,指定哪些域名可以访问服务器端提供的接口,以及如何设置HTTP中的特殊字段来实现跨域的。
例如,使用 HTTP议实现跨域,可以在服务器端设置Access-Control-Allow-Origin性,以允许特定域的跨域请求。
3. 代理服务器:代理服务器的思路是,在客户端和服务器之间加入一个中间层,用代理服务器的域名发出请求,从而实现跨域访问。
对于某些情况,服务器和客户端之间的回调函数等更高级的功能不能很好地支持,此时可以采用代理服务器来解决跨域问题。
4. HTML5 中的 CORS(跨来源资源共享):CORS(Cross-Origin Resource Sharing)是 HTML5出的一种新特性,它允许网页从不同域中加载资源,而不像以前受限于同一域。
CORS 使用 HTTP议的特殊字段来设置请求和响应,以实现浏览器和服务器之间的跨域资源共享,只需开启服务器端的 CORS能即可。
如何解决AJAX中跨域访问出现'没有权限'的错误很多人在使用AJAX调用别人站点内容的时候,JS会提示"没有权限"错误,这是XMLHTTP组件的限制-安全起见禁止访问非同域的网站,下面一个例子来访问,<script type="text/javascript">function createobj() {if (window.ActiveXObject) {return new ActiveXObject("Microsoft.XMLHTTP");}else if (window.XMLHttpRequest) {return new XMLHttpRequest();}}function getWebPage(url) {varoBao=createobj();varmy_url=urloBao.open('get',my_url,false);oBao.onreadystatechange=function(){if(oBao.readyState==4){if(oBao.status==200){varreturnStr=oBao.responseText;document.write(returnStr);}else{document.write("未找到您输入的地址或服务器505错误!");}}}oBao.send(null);}getWebPage('');</script>保存这段代码到test.html,在本地直接用IE打开没问题,但将该段代码上传到服务器后,问题出现了--JS提示"没有权限"错误!!!这该如何解决呢?下面思考一下:既然不能访问非同域的,只能访问同域的地址了,同域的动态文件怎么获取非同域网页内容呢?我们还是想到的AJAX,只不过这个AJAX是在服务器端执行.大体思路是这样的:首先将URL用AJAX提交给自己站内的文件,例如getPage.asp---在getPage.asp再次通过服务器XMLHTTP来访问提交来的URL---将获取的内容返回给提交URL 的页----显示内容下面开始组织代码,首先是test.html文件<script type="text/javascript">function createobj() {if (window.ActiveXObject) {return new ActiveXObject("Microsoft.XMLHTTP");}else if (window.XMLHttpRequest) {return new XMLHttpRequest();}}function getWebPage(url) {varoBao=createobj();varmy_url="getpage.asp?url="+escape(url);oBao.open('get',my_url,false);oBao.onreadystatechange=function(){if(oBao.readyState==4){if(oBao.status==200){varreturnStr=oBao.responseText;document.write(returnStr);}else{document.write("未找到您输入的地址或服务器505错误!");}}}oBao.send(null);}getWebPage('');</script>再就是getpage.asp文件(注意:要以UTF-8格式保存本文件,防止乱码),如下:<%response.charset="UTF-8"reg="\<meta.+ charset= {0,}([^\"" \>\/]*).+\/{0,1}\>"'函数名:GetResStr'作用:获取指定URL的HTML代码'参数:URL-要获取的URLfunction GetResStr(URL)err.cleardim ResBody,ResStr,PageCode,ReturnStrSet Http=createobject("MiCROSOFT.XMLHTTP")Http.open "GET",URL,FalseHttp.Send()If Http.Readystate =4 ThenIf Http.status=200 ThenResStr=http.responseTextResBody=http.responseBodyPageCode=GetCode(ResStr,reg)ReturnStr=BytesToBstr(http.responseBody,PageCode) GetResStr=ReturnStrEnd IfEnd IfEnd Function'函数名:BytesToBstr'作用:转换二进制数据为字符'参数:Body-二进制数据,Cset-文本编码方式Function BytesToBstr(Body,Cset)Dim ObjstreamSet Objstream = CreateObject("adodb.stream")objstream.Type = 1objstream.Mode =3objstream.Openobjstream.Write bodyobjstream.Position = 0objstream.Type = 2objstream.Charset =CsetBytesToBstr = objstream.ReadTextobjstream.Closeset objstream = nothingEnd Function'函数名:GetCode'作用:转换二进制为字符'参数:str-待查询字符串,regstr-正则表达式Function GetCode(str,regstr)Dim Reg,serStrset Reg= new RegExpReg.IgnoreCase = TrueReg.MultiLine = TrueReg.Pattern =regstrif Reg.test(str) then '若查询到匹配项Set Cols = Reg.Execute(str)serStr=Cols(0).SubMatches(0) '使用匹配到的第一个匹配项else '否则给个默认值gb2312,有点省懒法,如果页面没给出编码格式,想知道确实有点麻烦 serStr="gb2312"end ifGetCode=serStrend functiondim url:url=request.querystring("url")response.writeGetResStr(URL)%>代码组织完毕,实验下,成功提取的内容!!!!!这样就可以解决"没有权限"的问题了。
js 跨域访问问题解决方法什么引起了ajax不能跨域请求的问题?ajax本身实际上是通过XMLHttpRequest对象来进行数据的交互,而浏览器出于安全考虑,不允许js代码进行跨域操作,所以会警告。
有什么完美的解决方案么?解决方案有不少,但是只能是根据自己的实际情况来选择。
跨域的安全限制都是指浏览器端来说的,服务器端是不存在跨域安全限制的。
所以针对这2种情况衍生出2类跨域解决方案,一类是服务器端做中转类似代理方式,一类是js处理浏览器端的真正跨域访问。
具体情况有:1)本域和子域的相互访问: 和 用 document.domain ="";2)本域和其他域的相互访问: 和 用 XMLHttpRequest访问代理,既服务器端代理方式3)本域和其他域的相互访问: 和 用 JS创建动态脚本,<script>标签的src属性实现跨域访问解决方法:1)如果想做到数据的交互,那么和必须由你来开发才可以。
可以将用iframe添加到 的某个页面下,在和iframe里面都加上document.domain = "",这样就可以统一域了,可以实现跨域访问。
就和平时同一个域中镶嵌iframe一样,直接调用里面的JS就可以了。
2)这种情形是最经常遇到的,也是用的最多的了。
就是和你只能修改一个,也就是另外一个是别人的,人家告诉你你要取得数据就访问某某连接参数是什么样子的,最后返回数据是什么格式的。
而你需要做的就是让你的服务器端充当中转代理,让服务器去别人的网站上取得数据,再返回给浏览器端。
服务器端充当中转代理方式有很多可以由服务器端程序实现,也可以修改服务器配置实现,下面举例Apache重写(mod_rewrite proxy模式)方式:在Apache的安装目录下的conf/httpd.conf 文件添加如下语句:LoadModule proxy_module modules/mod_proxy.soLoadModule proxy_http_module modules/mod_proxy_http.soLoadModule rewrite_module modules/mod_rewrite.soRewriteEngine OnRewriteRule ^/_proxy/(.*)$ http://$1 [P,L]这样就可以把其他网站的url映射为本服务器的/_proxy/目录下面, 例如可以这么访问百度/_proxy/3)这个的区别就是请求是使用<script>标签来请求的,这个要求也是两个域都是由你来开发才行。
Ajax跨域、Json跨域、Socket跨域和Canvas跨域等同源策略限制的解决方法同源是指相同的协议、域名、端口,三者都相同才属于同域。
不符合上述定义的请求,则称为跨域。
相信每个开发人员都曾遇到过跨域请求的情况,虽然情况不一样,但问题的本质都可以归为浏览器出于安全考虑下的同源策略的限制。
跨域的情形有很多,最常见的有Ajax跨域、Socket跨域和Canvas跨域。
下面列举一些我们常见的跨域情形下,某些浏览器控制台给出的错误提示:FireFox下的提示:已阻止交叉源请求:同源策略不允许读取***上的远程资源。
可以将资源移动到相同的域名上或者启用 CORS 来解决这个问题。
Canvas跨域Chrome下的提示:UncaughtSecurityError:Failed to execute'getImageData' on 'CanvasRenderingContext2D':The canvas has been taintedby cross-origin data.或:Imagefrom origin '' has been blocked from loading by Cross-OriginResource Sharing policy: No 'Access-Control-Allow-Origin' header is present onthe requested resource. Origin '' is therefore not allowedaccess.网上有许多解决跨域的方法,大体上有这几种:1)document.domain iframe的设置2)动态创建script3)利用iframe和location.hash4)实现的跨域数据传输5)使用HTML5 postMessage6)利用flash7)通过代理,js访问代理,代理转到不同的域/javascript/howto-proxy.html8)Jquery JSONP(不能成为真正的Ajax,本质上仍是动态创建script)/chopper/archive/2012/03/24/2403 945.html9)跨域资源共享(CORS)这是HTML5跨域问题的标准解决方案说明:方案1~方案6见Rain Man所写的文章《JavaScript跨域总结与解决办法》/rainman/archive/2011/02/20/1959 325.html下面主要就我总结的几种解决跨域的方法,展开说一下。
AJAX介绍及解决跨域请求Ajax准备知识:json什么是json?定义:JSON(JavaScript Object Notation, JS 对象标记) 是⼀种轻量级的数据交换格式。
它基于 ECMAScript (w3c制定的js规范)的⼀个⼦集,采⽤完全独⽴于编程语⾔的⽂本格式来存储和表⽰数据。
简洁和清晰的层次结构使得 JSON 成为理想的数据交换语⾔。
易于⼈阅读和编写,同时也易于机器解析和⽣成,并有效地提升⽹络传输效率。
讲json对象,不得不提到JS对象合格的json对象:["one", "two", "three"]{ "one": 1, "two": 2, "three": 3 }{"names": ["张三", "李四"] }[ { "name": "张三"}, {"name": "李四"} ] 不合格的json对象:{ name: "张三", 'age': 32 } // 属性名必须使⽤双引号[32, 64, 128, 0xFFF] // 不能使⽤⼗六进制值{ "name": "张三", "age": undefined } // 不能使⽤undefined{ "name": "张三","birthday": new Date('Fri, 26 Aug 2011 07:13:10 GMT'),"getName": function() {return ;} // 不能使⽤函数和⽇期对象}stringify与parse⽅法JSON.parse(): ⽤于将⼀个 JSON 字符串转换为 JavaScript 对象 eg:console.log(JSON.parse('{"name":"Yuan"}'));console.log(JSON.parse('{name:"Yuan"}')) ; // 错误console.log(JSON.parse('[12,undefined]')) ; // 错误JSON.stringify(): ⽤于将 JavaScript 值转换为 JSON 字符串。
AJAX跨域问题解决⽅案
最近⽤Hbuilder开发⼀个简单的APP应⽤,登录、注册时调⽤后台的⽅法,结果出现了ajax跨域的访问,很纳闷怎么会跨域,于是⼜想起了度娘......
⼀共总结出三种⽅案:代理、JSONP、XHR2(XMLHttpRequest Level 2)。
第⼀种:jsonp
$.ajax({
type:"get",
dataType:"jsonp",/*加上datatype*/
jsonpCallback:"success_jsonpCallback",/*设置⼀个回调函数,名字随便取,和下⾯的函数⾥的名字相同就⾏*/
success:function(){。
}
});
第⼆种:XMLHttpRequest Level 2
只需要在服务器端头部加上下⾯两句代码:
header( "Access-Control-Allow-Origin:*" ); //*代表可以访问的地址,可以设置指定域名
header( "Access-Control-Allow-Methods:POST,GET" );
这样在客户端使⽤常规的AJAX代码即可。
第三种:代理
这种⽅式是通过后台(ASP、PHP、JAVA、)获取其他域名下的内容,然后再把获得内容返回到前端,这样因为在同⼀个域名下,所以就不会出现跨域的问题。
亲测第⼀种,第⼆种可以实现,第三种没有测试。
AJAX跨域访问的解决方法
Javascscript:使用web代理解决XMLHttpRequest跨域调用问题
XMLHttpRequest对象(IE、Firefox中的XMLHTTP对象)是当今尤其是ajax的web 应用程序的核心.但实际上,使用此对象来编写客户端web应用程序会在跨域的网络连接上受到web浏览器的严重限制.
为什么需要一个代理
web浏览器在网络连接的时候会强制执行一个安全限制,其中就包括调用XMLHttpRequest。
此安全限制阻止脚本或者应用程序连接任何其他的不是来自本域的web服务(IE下可通过修改开启选项来允许跨域请求).如果你的web程序和程序使用的XML数据来自同一服务器,那不会有问题。
但是,如果你访问一个web服务器,而web服务器返回页面请求另外一个如Yahoo! Web Service这样的服务器,那么这个访问就会受到限制。
这个问题有很多解决方案,最通用的就是在你的web服务器上安装一个代理.你可以通过调用自己的web服务代理来代替直接调用其它服务器上的web服务,通过代理发起XMLHttpRequest请求,然后代理传递请求到web服务,并且返回客户端应用程序所需要的数据。
因为所有数据来自你自己的服务器,所以你的浏览器不会受到什么限制。
出于安全考虑,你web服务器上安装的任何代理被限制使用是一个好主意.转发连接到任意网站url的开放式代理会被滥用。
尽管很难限制连接只能来自你自己的应用程序,但是你可以阻止代理去连接那些你没有指定的服务器. Hard code the URL to connect to in the proxy itself 或者提供限制选项.这可以使得代理对不是你的客户端应用程序的用户较低的开放和较少的应用。
其他解决方案
除了通过使用web代理来转发应用程序的服务数据外,还有其他几种方式来绕过浏览器的跨域限制.
∙使用阿帕奇的mod_rewrite or mod_proxy来从你的服务器上转发到另外的服务器.在你的客户端代码中你只要做请求就可以了,就好象工
作在你自己的服务器上-------不会有浏览器的限制问题.然后阿帕奇会
神奇的为你请求其他服务器.
∙使用json或者动态<script>标记来替代xml和XMLHttpRequest.你可以通过直接在<script>标记内发送你的web服务请求,这样就可以完全绕过浏览器的安全限制.你使用的yahoo服务能够输出JSON(使用
output=json和callback=function参数),当页面加载完成后从web服务返回的数据已经被优化为javascript对象.参见JSON Documentation.
∙对你的脚本进行数字签名.在FireFox中,你可以为你的脚本和那些信任站点的脚本申请一个数字签名.这样FireFox就会允许你通过
XMLHttpRequest访问任何的域.但是,其他浏览器不支持这种方式的脚本签名,所以,这种解决方案会受限.。