JS跨域问题

最新推荐文章于 2022-11-03 20:42:27 发布
最新推荐文章于 2022-11-03 20:42:27 发布
阅读量83 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript json java ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cwfmaker/article/details/84153575
版权

 

由于安全方面的考虑，Javascript被限制了跨域访问的能力，但是有时候我们希望能够做一些合理的跨域访问的事情，那么怎么办呢？
这里分两类情况：
一、基于同一父域的子域之间页面的访问；参见如下3个domain域：taobao.com、jipiao.taobao.com、promotion.taobao.com；它们有相同的父域taobao.com。
二、基于不同父域页面之间的访问；参见如下3个domain域：taobao.com、baidu.com、sina.com.cn；它们具有不同的父域。

解决它们之间跨域的方案有：
方案1：服务器Proxy
域A的页面JS需要访问域B下的链接获取数据，该方案在域A的服务器端建立一个Proxy程序(可能是ASP、servlet等任何服务端程序)，域A的页面JS直接调用本域下的Proxy程序，proxy程序负责将请求发送给域B下的链接并获取到数据，最后再通过Proxy将数据返回给页面JS使用。
经过的访问流程就是： 域A下JS --> 域A 下Proxy -- > 域B下的链接
例子：
第一步：
域A:  http://Jipiao.taobao.com/test.htm
页面上javascript脚本：

 

 

<mce:script type="text/javascript"><!--

Var sUrl="http://Jipiao.taobao.com/proxy.do"; //本域下代理地址

var callback =

{

   success: function(res) {  alert(res.responseText);  }, 

   failure: function(res) {  alert('failure');}, 

   argument:{} 

}

YAHOO.util.Connect.asyncRequest('GET', sUrl, callback, null);  

// --></mce:script>


第二步：
完成域A服务端的Proxy程序(这里假定是一个servlet)，伪码如下：

 

 

Public class Proxy extends …….{

..doGet(……..){

 HttpClient  client=……;

 GetMethod get=new  GetMethod("www.baidu.com/xxxxx.do");//访问域B的链接

 int statusCode = client.executeMethod(get);

 if (statusCode != HttpStatus.SC_OK) {

     byte[] responseBody = get.getResponseBody();

     String res=new String(responseBody);

     Httpresponse.getWriter().write(res);//将数据返回给域A  

 }

}

 

}

 

 

方案2：通过Script标签: 
在域A页面http://Jipiao.taobao.com/test.htm 的head中写一个空的Script标签：

 

 

<html>

<head>

 <mce:script id="remoteScript" type="text/javascript" src=""/><!--

<head>

<body>

<script type="text/javascript" >

 Var remoteScript=document.getElementById("remoteScript");

 remoteScript.src="www.baidu.com/xxxxx.do";//域B的链接

 alert(remote.test);//使用域B返回的JSON数据 

 alert(f[0]);

// --></mce:script>

</body>

</html>


 

 

注意：这种方案要求域B返回的数据必须是合法的JSON格式或者如JS文件的格式；比如域B返回的数据格式如下：
Var remote={test:’hello’};
Var f=[2,1];

方案3：隐藏iframe、共享domain:
即域A页面http://jipiao.taobao.com/yyyy.htm 的页面上写一个隐藏的iframe：

 

 

<html>

<head>

<head>

<body>

<mce:script type="text/javascript" ><!--

 Document.domain="taobao.com";

 Var remoteHtml=document.getElementById("remoteHtml");

 remoteHtml.src="promotion.taobao.com/xxxx.htm";//这里访问域B的链接

 var document=remoteHtml.ContentDocument; //这里就可以使用document来操作域B中页面xxx.htm的数据了

// --></mce:script>

<iframe id="remoteHtml" src="" style="diapay:none" mce_style="diapay:none"/>

</body>

</html>


 

 

注意：这里http://promotion.taobao.com/xxxx.htm 页面也需要设置document.domain="taobao.com"， 这种方法才能奏效。
之所以这种iframe的方法不适合不同父域之间的跨域，是因为设置document.domain只能设置为自己的父域，而不是能设置为其他域，例如:jiapiao.taobao.com只能设置document.domain="taobao.com"，而不能是document.domain="baidu.com"；

这里列举的三种方案各有优缺点：
Proxy方案优点是可以适用用于几乎所有的跨域访问，而且只需要要一个域中进行开发，另一个域可以提供任何类型格式的数据。缺点是这种方案经过了中间Proxy，所以延迟可能稍微大一点，并且会加重本域服务器的负荷，开发工作量也稍微大一点。
Script标签的方案可以说是非常简单的，不用几行代码就搞定了事，不过它对返回的数据格式要求有点严格，只能是Json格式数据,如果是其他格式的数据，那么这种方法就无能为力了。
隐藏iframe方式也很简单，它可以处理任何返回的数据格式，但它只适用在具有同一个父域下的跨域请求上，并且要求其他域得配合开发，即需要设置document.domain。

 

对于JS跨域访问的意思，我想再补充几点：

  1. 跨域访问，简单来说就是 A 网站的 javascript 代码试图访问 B 网站，包括提交内容和获取内容；比如想从A网站的页面中执行另外一个B网站内某页面中的JS对象、或者想在A网站的页面中用JS去解析B网站内某页面的dom元素等；出现这种跨域访问问题的应用场景一般是iframe中嵌入不同域的页面、或者向不同域发送Ajax请求等；
  2. 由于安全原因，跨域访问是被各大浏览器所默认禁止的；但是浏览器并不禁止在页面中引用其他域的JS文件，并可以自由执行引入的JS文件中的function；这点个人觉得至关重要！
  3. 是否跨域的判断规则为对三者进行比较：域名、协议、端口；三者中若有一个不相同，则会出现跨域问题；我们经常说的跨域问题一般指域名不同，因为这种场景出现的几率最高而且有一些办法可以解决；比如前面提到的taobao.com域下的二级域名跨域问题；
  4. 对于主域都不一样、或者协议不同（比如https与http）的跨域问题（比如*.taobao.com域想访问*.baidu.com域内的内容），想从Web端来解决是完全不可能的，只能通过服务端Proxy的方案来解决；
  5. 常见的不同域间的页面制约dom元素包括： 
    window.location 可以设置，但不能读取。其它的 location 属性和方法被禁止访问； 
    document.href 可以设置，但不能读取。其它的 document 属性和方法被禁止访问； 
    <iframe> 的 src 可以设置，但不能读取；

原文地址：http://blog.csdn.net/sfdev/article/details/3887006

 

 

 

cwfmaker
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript 文本框
Elna_99的博客
10-19 5806
在HTML中，有两种方式表示文本框：一种是用标签，其type值设置为text，这种设出来使单行文本框，另一种是多行文本框，使用。他们之间有一些重要的区别。 标签：通过设置size特性，能够指定显示的字符数；通过value特性，可以设置初始值；maxlength能够设置能够显示的最大字符数； 通过设置rows,cols特性可以设置行列；与标签不同，的初始值不是在特性里设置的，而是由标签包围；而且
JS跨域
尊哥的博客
04-28 348
一、什么是跨域 在JavaScript中，有一个很重要的安全性限制，被称为“Same-Origin Policy”（同源策略），由于浏览器这个同源策略，凡是发送请求的url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。具体可以查看下表： 如果你进行了跨域请求，你在浏览器控制台就会看到以下提示： XMLHttpRequest cannot load http://external-d...
Javascript跨域访问解决方案
热门推荐
老唐 的专栏
02-13 3万+
由于安全方面的考虑，Javascript被限制了跨域访问的能力，但是有时候我们希望能够做一些合理的跨域访问的事情，那么怎么办呢？这里分两类情况：一、基于同一父域的子域之间页面的访问；参见如下3个domain域：taobao.com、jipiao.taobao.com、promotion.taobao.com；它们有相同的父域taobao.com。二、基于不同父域页面之间的访问；参见如下3个doma
js实现跨域的几种方式
kkk_3399的博客
09-18 2240
js实现跨域的几种方式一、jsonp跨域二、使用步骤1.引入库2.读入数据总结 一、jsonp跨域 jsonp的原理是利用 < script > 标签的跨域特性，可以不受限制地从其他域中加载资源，类似的标签还有 < img >. ==JSONP的优点是：==它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制；它的兼容性更好，在更加古老的浏览器中都可以运行，不需要XMLHttpRequest或ActiveX的支持；并且在请求完毕后可以通过调用callb
一个超NB的轻松黑掉网站方法
蜡笔小辛的专栏
07-16 1万+
一、打开你要黑的网站，如：http://blog.csdn.net/二、在浏览器的地址栏里输入：javascript: document.body.contentEditable="true"; document.designMode="on"; alert("you can modify this page now, as you wish."); void 0 三、现在你会发现他的
<textarea></textarea>标签显示内容，
baidu_35975930的博客
01-14 6478
标签如果需要显示内容， 下面段代码取  textarea  name 值并赋值给textarea 文本 var textobj=document.getElementById('questionBankName'); textobj.innerHTML=textobj.name; 直接在name设置你有显示的值就行了 如果想取 间值直接使用 textobj.innerHTML 即可
JS 跨域
shea_mong
03-08 459
JavaScript跨域一、什么是JS跨域？二、JS跨域解决办法1.JSONP2.CORS3、JSONP和CORS的区别 一、什么是JS跨域？ 在了解跨域之前，先要知道同源策略。 同源策略：是浏览器的一种安全策略，所谓同源是指域名、协议、端口完全相同。在同源策略下，只有同源的地址才可以相互通过 AJAX 的方式请求。而跨域就是只要两个地址中协议、域名、端口有任何一个不相同，那它们之间的请求就被称之为跨域请求。 JS跨域:指通过js在不同的域之间进行数据传输或通信，比如用ajax向一个不同的域请求数据，或者
深入分析Javascript跨域问题
10-24
JavaScript中的跨域问题源于浏览器实施的同源...总的来说，解决JavaScript跨域问题需要根据具体需求选择合适的方法，既要考虑安全性，也要考虑兼容性和性能。在实际开发中，通常会结合使用多种策略，以达到最佳效果。
NODE.JS跨域问题的完美解决方案
10-21
在Web开发中，跨域问题是一个常见的挑战，尤其是在客户端JavaScript尝试访问不同源的资源时。Node.js作为后端开发框架，同样需要处理这种问题。本文将详细讲解如何在Node.js中解决跨域问题，提供一个完美的解决方案...
javascript 跨域问题以及解决办法
01-19
javascript 跨域问题以及解决办法 什么是跨域问题？ 跨域这个问题是由于浏览器的同源策略引起的，请求的URL地址，必须与浏览器的URL是相同协议、相同域名、相同端口的，否则是不允许访问的 浏览器URL 要访问的...
JS跨域问题详解
01-19
JavaScript是一种在Web开发中经常使用的前端动态脚本技术。在JavaScript中，有一个很重要的安全性限制，被称为“Same-Origin Policy”（同源策略）。这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制...
textarea字数控制
龙珠课堂
11-16 2199
大家都知道input的maxlength属性可以控制允许用户输入的字数，但是textarea却不支持此属性。在这里我推荐一段我平时用于控制textarea字数的js代码（jQuery写的）。 [html] view plain copy textarea id="input_4" name="input_4" placeholder="限25字" col
用jQuery与JSONP轻松解决跨域访问的问题
u013358378的专栏
05-13 459
时间过得好快,又被拉回js战场时, 跨域问题这个伤疤又开疼了. 好在,有jquery帮忙,跨域问题似乎没那么难缠了.这次也借此机会对跨域问题来给刨根问底,结合实际的开发项目,查阅了相关资料,算是解决了跨域问题..有必要记下来备忘. 跨域的安全限制都是指浏览器端来说的.服务器端是不存在跨域安全限制的,所以通过本机服务器端通过类似httpclient方式完成“跨域访问”的工作，然后在浏览器
JavaScript文本框的操作
清山博客
08-25 9451
1.获取文本框里的回车数：  function  getCount(){    var count=document.all(TextArea1).innerHTML.split(/n).length;//获取回车的个数    alert("总共有"+ count +"个回车");}            2.判断文本框里汉字个数；   function cal(str
客户端JavaScript（二）--document、表单和表单元素
xiao_fan__的博客
04-15 386
document对象 Document 对象是是window对象的一个属性，因此可以将document对象作为一个全局对象来访问。当浏览器载入 HTML 文档, 它就会成为 Document 对象。 一、document对象的属性 html元素和body对象 document.documentElement 获取html元素，文档的根节点 document.body 获取文档的body元素...
Ajax及跨域请求
YUELEI118的博客
07-05 2296
javaScript实现ajax jquery实现ajax ajax跨域请求 jsonp
使用JavaScript限制TextArea多行文本域的可输入字数
夜郎King的博客
04-24 1万+
[size=large][b]1.背景[/b][/size] 在开发中遇到一个html的知识，大致需求是这样的：用户信息页面有一栏是用户备注，数据库设计可以存500个字。由于发布时没有把这个TextArea的可输入字数限制住，导致用户在输入超过500个字时程序抛异常，提示操作的数据太大。出了问题不怕，找到问题出现的症结对症下药就能迎刃而解。 [size=large][b]2.相关...
js执行＜textarea＞写的文本代码
学习使我快乐_玉祥
10-24 769
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <textarea id="js" style="width: 500px;height: 300px;"></textarea> <button onclick="initJS(docum.
Ajax跨域问题
helpluozhao123的博客
11-03 3428
ajax 是不能跨域。那么怎么解决前端发送请求的跨域问题呢。超详细，1、设置响应头、2、通过jsonp 3、通过调用jQuery封装的jsonp 4、httpclient 5、nginx
node.js跨域问题怎解决
最新发布
05-19
Node.js 跨域问题可以通过设置响应头来解决。一般情况下，跨域请求会触发浏览器的跨域限制，需要在服务器端设置响应头来允许跨域访问。 以下是一些解决跨域问题的方法： 1. 使用中间件：可以使用 `cors` 中间件，它可以在 API 中简单地添加跨域支持。安装 `cors` 中间件：`npm install cors --save`。使用方法： ```javascript const express = require('express'); const cors = require('cors'); const app = express(); app.use(cors()); ``` 2. 手动设置响应头：在服务器端设置响应头来允许跨域访问。以下是示例代码： ```javascript app.use(function(req, res, next) { res.setHeader('Access-Control-Allow-Origin', '*'); // 允许所有来源访问 res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, DELETE'); // 允许访问的方式 res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization'); // 允许请求头中携带的参数 next(); }); ``` 3. 使用代理：在客户端发出请求时，可以使用代理将请求发送到同一个域名下的服务器，然后在服务器上进行跨域请求。以下是示例代码： ```javascript const http = require('http'); const proxy = require('http-proxy'); const apiProxy = proxy.createProxyServer(); const server = http.createServer(function(req, res) { const url = req.url; if(url.match(/^\/api/)) { apiProxy.web(req, res, { target: 'http://localhost:3000' }); } else { // 处理其他请求 } }); server.listen(8080); ``` 以上是三种常见的解决跨域问题的方法。根据实际情况选择合适的方法即可。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值