相关文章推荐
干练的罐头  ·  MAUI Resource 仅在 ...·  1 年前    · 
精明的豆腐  ·  @ExceptionHandler or ...·  2 年前    · 
道上混的电影票  ·  [Solved] how can i ...·  3 年前    · 

后来仔细看了下,这个主要是受浏览器同源策略所限制:

1、先来说说什么是源
• 源(origin)就是协议、域名和端口号。
以上url中的源就是:http://www.company.com:80
若地址里面的协议、域名和端口号均相同则属于同源。
以下是相对于 http://www.a.com/test/index.html 的同源检测
• http://www.a.com/dir/page.html ----成功
• http://www.child.a.com/test/index.html ----失败,域名不同
• https://www.a.com/test/index.html ----失败,协议不同
• http://www.a.com:8080/test/index.html ----失败,端口号不同

2.什么是同源策略?
同源策略是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源。所以a.com下的js脚本采用ajax读取b.com里面的文件数据是会报错的。

• 不受同源策略限制的:
1、页面中的链接,重定向以及表单提交是不会受到同源策略限制的。
2、跨域资源的引入是可以的。但是js不能读写加载的内容。如嵌入到页面中的<script src="..."></script>,<img>,<link>,<iframe>等。

二、跨域
1、什么是跨域
受前面所讲的浏览器同源策略的影响,不是同源的脚本不能操作其他源下面的对象。想要操作另一个源下的对象是就需要跨域。

2、跨域的实现形式
• 降域 document.domain
同源策略认为域和子域属于不同的域,如:
child1.a.com 与 a.com,
child1.a.com 与 child2.a.com,
xxx.child1.a.com 与 child1.a.com
两两不同源,可以通过设置 document.damain='a.com',浏览器就会认为它们都是同一个源。想要实现以上任意两个页面之间的通信,两个页面必须都设置documen.damain='a.com'。
此方式的特点:
1. 只能在父域名与子域名之间使用,且将 xxx.child1.a.com域名设置为a.com后,不能再设置成child1.a.com。
2. 存在安全性问题,当一个站点被攻击后,另一个站点会引起安全漏洞。
3. 这种方法只适用于 Cookie 和 iframe 窗口。
• JSONP跨域
JSONP和JSON并没有什么关系!
JSONP的原理:(举例:a.com/jsonp.html想得到b.com/main.js中的数据)在a.com的jsonp.html里创建一个回调函数xxx,动态添加<script>元素,向服务器发送请求,请求地址后面加上查询字符串,通过callback参数指定回调函数的名字。请求地址为http://b.com/main.js?callback=xxx。在main.js中调用这个回调函数xxx,并且以JSON数据形式作为参数传递,完成回调。我们来看看代码:
• // a.com/jsonp.html中的代码
•

function addScriptTag(src) { 
    var script = document.createElement('script'); 
    script.setAttribute("type","text/javascript"); 
    script.src = src; 
    document.body.appendChild(script);
    window.onload = function () { 
    addScriptTag('http://b.com/main.js?callback=foo');
    } //window.onload是为了让页面加载完成后再执行
    function foo(data) { 
    console.log(data.name+"欢迎您");

//b.com/main.js中的代码
foo({name:"hl"})
这样便实现了跨域的参数传递。

采用jsonp跨域也存在问题:
1. 使用这种方法,只要是个网站都可以拿到b.com里的数据,存在安全性问题。需要网站双方商议基础token的身份验证,这里不详述。
2. 只能是GET,不能POST。
3. 可能被注入恶意代码,篡改页面内容,可以采用字符串过滤来规避此问题。

• CORS
CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)。
它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。
刚才的例子中,在b.com里面添加响应头声明允许a.com的访问,代码:
Access-Control-Allow-Origin: http://a.com
然后a.com就可以用ajax获取b.com里的数据了。
注意:此方法IE8以下完全不支持,IE8-10部分支持。详见caniuse-CORS
详细内容请参考:跨域资源共享 CORS 详解

• 其它方法
1. HTML5的postMessage方法
2. window.name
3. location.hash

同源策略摘自:https://www.cnblogs.com/rockmadman/p/6836834.html

今天遇到一个必须在前端HTTP页面发送HTTPS请求的功能,有点小尴尬,这个跨域问题,也没啥好的解决方式,我网上查了一下,也没啥好的方式!后来总结了一下,有两种方式:1、a标签&amp;lt;a href=&quot;https://aaa.com&quot;&amp;gt; &amp;lt;/a&amp;gt;2、location.href&amp;lt;script&amp;gt;var url = &quot;https://aaa.com&quot;;...
前言:ajax和jsonp可以与后台通信,获取数据和信息,但是又不用刷新整个页面,实现页面的局部刷新。 一、ajax •定义:一种发送http请求与后台进行异步通讯的技术。 •原理:实例化xmlhttp对象,使用此对象与后台通信。 ajax的同源策略: •ajax请求的页面或资源只能是同一个域下面的资源,不能是其他域的资源,这是在设计ajax时基于安全考虑。 ——————————————————————————– ajax的方法: 1. $.ajax({}): •常用参数: •url:请求网络地址 •type:请求方式,默认是’GET’,常用’POST’ •dataType:设置返回的数据格式
function getQueryVariable(variable) { var query = window.location.href.split('?')[1]; var vars = query.split("&"); for (var i = 0; i < vars.length; i++) { var pair = vars[i].split("="); if (pair[0]...
Nodejs https请求 一.为什么用https请求 在跟网络交互时,我们往往会想到HTTPS协议,因为它增加了数据加密,更安全,在数据进行传输之前,对数据进行加密,然后再发送到服务器。 http 模块和 https 模块 比较 http :由 http、TCP、ip 组成 https:由 http、SSL/TLS、TCP、ip 组成 https 是基于 SSL 和 TLS 的 http ...
Selenium Server主要控制浏览器行为,总的来说,Selenium Server由三部分组成:Launcher、Http Proxy、Selenium Core,其中Selenium Core是在Selenium Server启动浏览器时,嵌入到浏览器中的。Selenium Core是一堆Javascript函数集合,当Selenium RC通过网络与 Selenium Server通讯时(通过简单的Http Get或Post请求),Selenium Server解析客户端请求为Selenese Command,然后就会调用相应的JS函数来控制浏览器操作。 (1).测试案例(Testcase)通过Client Lib的接口向Selenium Server发送Http请求,要求和Selenium Server建立连接。 为什么要通过发送Http请求控制Selenium Server而不采用其他方式呢?从上文可以看出,Selenium Server是一个独立的中间服务器(确切地说是代理服务器),它可以架设在其他机器上!所以测试案例通过发送HTTP请求去控制Selenium Server是很正常的。 (2).Selenium Server的Launcher启动浏览器,把Selenium Core加载入浏览器页面当中,并把浏览器的代理设置为Selenium Server的Http Proxy。 (3).测试案例通过Client Lib的接口向Selenium Server发送Http请求,Selenium Server对请求进行解析,然后通过Http Proxy发送JS命令通知Selenium Core执行操作浏览器的动作。 (4).Selenium Core接收到指令后,执行操作。 (5).浏览器收到新的页面请求信息(因为在(4)中,Selenium Core的操作可能引发新的页面请求),于是发送Http请求,请求新的Web页面。 由于Selenium Server在启动浏览器时做了手脚,所以Selenium Server会接收到所有由它启动的浏览器发送的请求。 (6).Selenium Server接收到浏览器的发送的Http请求后,自己重组Http请求,获取对应的Web页面。 (7).Selenium Server的Http Proxy把接收的Web页面返回给浏览器。 因为浏览器存在同源策略,所以Selenium RC中的Selenium Server需要以这种代理模式运行。
什么是 JSONP Jsonp(JSON with Padding) 是 json 的一种”使用模式”,是一种非常常用的跨域请求方式。主要原理是利用了script 标签可以跨域请求的特性,由其 src属性发送请求到服务器,服务器返回 JavaScript 代码,浏览器接受响应,然后就直接执行了,这和通过 script 标签引用外部文件的原理是一样的。 JSONP由两部分组成:回调函数和数据,回调函数是当响应到来时应该在页面中调用的函数,回调函数的名字一般在请求中指定。当服务器响应时,服务器端就会把该函数和数据拼成字符串返回。 同源策略: 是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少
JSONP JSONP(JSON with Padding)是利用浏览器对script的资源引用没有同源限制,通过动态插入一个script标签,当资源加载到页面后会立即执行的原理实现跨域的。 JSONP是一种非正式传输协议,具体做法是:用户传递一个callback参数给服务端。服务端返回数据时用cal
跨域同源政策限制范围举例demo1demo2Cookieiframe1 片段识别符2 window.name3 window.postMessage4 LocalStorageAJAXJSONPWebSocketCORS**简单请求的处理方式****非简单请求的处理方式**        一个源的定义 如果两个页面的...
2022夏招、秋招高频面试真题及答案,八股文背诵必备文档。涵盖Java基础、JVM、线程相关、HTTP代理等相关知识。节选: 如何实现跨域? 方式一:图片ping或script标签跨域 图片ping常用于跟踪用户点击页面或动态广告曝光次数。 script标签可以得到从其他来源数据,这也是JSONP依赖的根据。 方式二:JSONP跨域 JSONP(JSON with Padding)是数据格式JSON的一种“使用模式”,可以让网页从别的网域要数据。根据 XmlHttpRequest 对象受到同源策略的影响,而利用 <script>元素的这个开放策略,网页可以得到从其他来源动态产生的JSON数据,而这种使用模式就是所谓的 JSONP。用JSONP抓到的数据并不是JSON,而是任意的JavaScript,用 JavaScript解释器运行而不是用JSON解析器解析。所有,通过Chrome查看所有JSONP发送的Get请求都是js类型,而非XHR。 只能使用Get请求 不能注册success、error等事件监听函数,不能很容易的确定JSONP请求是否失败 JSONP
(1).测试案例(Testcase)通过Client Lib的接口向Selenium Server发送Http请求,要求和Selenium Server建立连接。 为什么要通过发送Http请求控制Selenium Server而不采用其他方式呢?从上文可以看出,Selenium Server是一个独立的中间服务器(确切地说是代理服务器),它可以架设在其他机器上!所以测试案例通过发送HTTP请求去控制Selenium Server是很正常的。 (2).Selenium Server的Launcher启动浏览器,把Selenium Core加载入浏览器页面当中,并把浏览器的代理设置为Selenium Server的Http Proxy。 (3).测试案例通过Client Lib的接口向Selenium Server发送Http请求,Selenium Server对请求进行解析,然后通过Http Proxy发送JS命令通知Selenium Core执行操作浏览器的动作。 (4).Selenium Core接收到指令后,执行操作。 (5).浏览器收到新的页面请求信息(因为在(4)中,Selenium Core的操作可能引发新的页面请求),于是发送Http请求,请求新的Web页面。 由于Selenium Server在启动浏览器时做了手脚,所以Selenium Server会接收到所有由它启动的浏览器发送的请求。 (6).Selenium Server接收到浏览器的发送的Http请求后,自己重组Http请求,获取对应的Web页面。 (7).Selenium Server的Http Proxy把接收的Web页面返回给浏览器。 因为浏览器存在同源策略,所以Selenium RC中的Selenium Server需要以这种代理模式运行。
浏览器同源策略的限制,XmlHttpRequest只允许请求当前源(相同域名、协议、端口)的资源。 -1)jsonp只支持get请求 -2)不受同源策略限制 ,兼容性好 不需要XMLHttpRequest(ActiveX)支持,通过js回调函数返回结果 -3)不能解决 不同域的两个页面之间js调用的问题 2. jsonp 原理 动态添加一个script标签,get链接上发送回调函数名称 传给服务器 服务器获取回调函数名称 返回这个函数名称的JS函数(拼装函数) json
在Javascript中,可以通过XMLHttpRequest对象来发HTTP请求。XMLHttpRequest对象是一种可以使客户端 JavaScript 与服务器端 HTTP 或 HTTPS 资源交互的 API。下面是一个简单的示例代码,演示了如何使用XMLHttpRequest对象发起GET请求: ```javascript const xhr = new XMLHttpRequest(); xhr.open('GET', 'https://api.example.com/data', true); xhr.onload = function () { if (xhr.status === 200) { console.log(xhr.responseText); } else { console.error('Error: ' + xhr.status); xhr.send(); 在这个示例中,我们首先创建了一个XMLHttpRequest对象,并设置了请求的方法、URL和是否为异步请求。然后,我们通过指定onload属性来定义一个回调函数,当请求成功完成时,它会被调用。 最后,我们调用send()方法来发送请求。发起请求后,我们可以在回调函数中检查请求的状态码来处理成功或失败的情况,并访问服务器返回的数据。需要注意的是,由于浏览器的安全策略,XMLHttpRequest有一些限制,比如同源策略和CORS等,需要在调用前确保符合安全要求。