Js通过Web代理发起跨域请求

时间: 2018-02-11阅读: 2479标签: 跨域

XMLHttpRequest对象(IE中为XMLHTTP对象)是AJAX应用的核心。由于现代浏览器对跨域请求的限制,在使用时需多加注意。本教程尽量用简单易懂的话描述(跨域)问题,并提供一个方案:通过Web代理(Web Proxy),将网络请求从你的Web服务器转发给其他服务,如Yahoo! Web Service(译注:Yahoo! Web Service ,即雅虎Web服务,公开的接口包括天气,搜索,地图等)。


为什么需要代理?

现代浏览器会对网络连接加上一些安全方面的限制,其中就包括XMLHttpRequest请求。其限制了页面脚本与同源服务器之外的服务器建立连接(IE允许跨域请求,但需要在设置中开启)。如果网页与XML数据来源同源,则不会受限。


但若一个Web应用向另一个服务器(如雅虎服务 )发请求,则浏览器会阻止双方建立连接,导致请求失败。


关于跨域,已经有很多解决方案了。最常用的方法是在你的Web服务器上安装代理。不直接向Web服务(译注:一般是非同源的后端服务)发XMLHttpRequest请求,而是向你自己的Web服务器发请求(译注:即利用你的服务器转发请求,暂且将你的服务器称为“代理服务器”)。然后代理服务器将请求转发给真正的Web服务,并将数据传回给客户端(即前端页面)。因为请求连接的双方是同源的(译注:你自己的服务器和前端页面就是同源的),并且数据是从你的服务器返回的,所以浏览器不会阻止。


出于安全考虑,你自己的代理服务器应该有所限制。无限制公开的代理服务器可能会被滥用(译注:因为后端发请求不会有同源策略的限制)。若只允许你自己的应用向你的代理服务器发请求有些困难(译注:意思是你没办法阻止其他人给你的代理服务器发请求),但你可以限制你的代理服务器对指定的服务器以外的服务器响应。比如将URL硬编码到代理链接中或用一些限制条件将你的代理服务器保护起来,同时也会让你的Web应用不会过于暴露。


通过PHP代理雅虎服务

在雅虎开发者社区的JavaScript开发者中心,给出了一个简单的用PHP编写的网络代理示例程序,该程序代理请求了雅虎的搜索接口,你可以在你自己的Web服务器上安装此小程序,安装位置可以自定。(当然你的Web服务器必须能先运行PHP)。

代理程序将雅虎服务的URL硬编码在全局变量HOSTNAME中。你可以修改这个变量到任何你想要使用的雅虎服务。这里使用雅虎搜索的域名,雅虎服务还有其他域名,如雅虎本地(Yahoo! Local http://local.yahooapis.com)和 雅虎旅游(Yahoo! Travel http://api.travel.yahoo.com)

define ('HOSTNAME', 'http://search.yahooapis.com/');

要在你的客户端应用中使用PHP代理,需要将JavaScript代码中向雅虎服务请求的URL中的雅虎域名删除。雅虎域名由服务器端的代理添加。下面的代码出自JavaScript开发中心一个完整的XMLHttpRequest代码示例

// The web services request minus the domain name
var path = 'VideoSearchService/V1/videoSearch?appid=YahooDemo&query=madonna&results=2';

// The full path to the PHP proxy
var url = 'http://localhost/php_proxy_simple.php?yws_path=' + encodeURIComponent(path);
... // core xmlhttp code
xmlhttp.open('GET', url, true);

注意: 示例中仅使用了HTTP GET请求,但也支持POST请求。

你可以修改代码,在服务器端处理请求中获得的数据,例如,筛选出你需要的元素,或将XML解析为更适合JavaScript格式。


其他解决方案

除了使用Web代理将数据转发到自己的应用(译注:此处特指后端服务器程序)之外,还有其他几种方式:

  • 通过Apache的 mod_rewrite或mod_proxy将请求转发给其他服务器。而你的客户端只与你自己的服务器通信,就像正常普通的请求一样,不会有什么浏览器跨域限制。Apache会自动为你将请求转发给其他服务器。
  • 使用JSON或动态<script>标签而不是XML和XMLHttpRequest。通过<script>标签直接发请求,可绕过浏览器的跨域限制。如果你所要用的雅虎服务支持JSON(通过output=json和callback=函数参数设置),当页面加载时,雅虎服务的数据会以JavaScript对象的形式存在。具体怎么做请参阅JSON文档
  • 在脚本中加上数字签名。在Firefox中,你可以将数字签名应用在脚本上,然后这些脚本将被浏览器视为“可信的”。然后,Firefox将允许你通过XMLHttpRequests向任何域名发起请求。但目前其他浏览器都不支持对脚本进行数字签名,所以此方案使用有限。


更多信息

更多关于JavaScript,XMLHttpRequest,雅虎服务和其他JavaScript开发的信息,请参考雅虎开发者平台JavaScript开发者中心


原文来源:JavaScript Developer Center : Use a Web Proxy for Cross-Domain XMLHttpRequest Calls - YDN
翻译来源:http://www.zcfy.cc/article/javascript-developer-center-use-a-web-proxy-for-cross-domain-xmlhttprequest-calls-ydn


吐血推荐

1.站长广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入...

2.休闲娱乐: 网页游戏  直播/交友   H5游戏

链接: http://www.fly63.com/article/detial/429

缓存竟也能导致跨域问题!

由于页面设计需要,页面展示图片,并可点击下载按钮进行下载(需要前端打包多个图片,所以需要使用ajax请求图片获得二进制内容,不能直接使用img或a进行下载),如图:

js跨域访问问题

这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同,都被当作是不同的域。如果进行跨域访问

你应该了解的CORS

如果你和我一样,第一次遇到 CORS (跨域资源共享),你想让服务器接收那些你拼接的 Ajax 请求并处理他们。所以你去 stackoverflow.com 复制一段代码来设置一些 HTTP Headers ,让请求可以正常工作

reactjs中配置代理跨域

第一步,下载依赖 http-proxy-middleware;第二步,在src下建立setupProxy.js;第三步,在数据请求中直接请求,在真实url后添加/api即可,eg

nginx 反向代理处理跨域问题

正向代理是你发出请求的时候先经过代理服务器,所以实际上发出请求的是代理服务器。反向代理是“代理你的目标服务器”,请求目标服务器的代理,做一些处理后再真正请求。在这篇文章里,反向代理用于处理跨域问题。

vue项目打包后怎样优雅的解决跨域

在使用vue.js开发前端项目时,再结合webpack搞起各种依赖、各种插件进行开发,无疑给前端开发带来了很多便捷,就在解决跨域这个问题上,相信众多用vue.js的前端同僚们同我一样尝到了甜头

vue-cli3 中跨域解决方案

此方案只能用于开发环境,线上最好设置同源策略(遇到个后端,装你妈批),前后端不在同一服务器的情况下,前端要访问后端API,可通过在vue.config.js中配置代理服务器。

如何用Nginx解决前端跨域问题?

在开发静态页面时,类似Vue的应用,我们常会调用一些接口,这些接口极可能是跨域,然后浏览器就会报cross-origin问题不给调。最简单的解决方法,就是把浏览器设为忽略安全问题,设置--disable-web-security。

CORS跨域请求

浏览器的同源策略会导致跨域,这里同源策略又分为以下两种:DOM同源策略、XmlHttpRequest同源策略。只要协议、域名、端口有任何一个不同,都被当作是不同的域,之间的请求就是跨域操作。

JSONP技术栈_jsonp的使用

JSONP方案:前端提供 API 的方法,其实解耦还没有解的很干净,我们在设置script的src时直接给它传参,后端插入这个参数这就可以了。因为JSONP是通过动态创建Script实现的,动态创建Script只有GET请求没有POST请求

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全