Ajax实现跨域访问

莫笑沉吟
150 阅读3分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第7天，点击查看活动详情

实现跨域访问

同源策略

1995年，同源政策由Netscape公司引入浏览器。目前，所有浏览器都实行这个政策。同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。随着互联网的发展，“同源政策”越来越严格。目前，如果非同源，共有三种行为受到限制:

  1. Cookie、LocalStorage和IndexDB无法读取
  2. DOM无法获得
  3. AJAX请求不能发送

虽然这些限制是必要的，但是有时很不方便，合理的用途也受到影响。所谓“同源”指的是“三个相同”:协议相同、域名相同以及端口相同。

域名是什么

域名(Domain Narne)又称为网域，是由一串用点分隔的名字组成的Internet上某一台计算机或计算机组的名称，用于在数据传输时标识计算机的电子方位（有时也指地理位置）。

URL说明
www.acom/a,js 和 www.a.corn/bjs同一域名下
www.a.com/lablajs和 www.a.com/script/bjs同一域名下不同文件夹
www.a.com:800O/ajs和 www.a.corn/bjs同一域名，不同端口
www.a.com/ajs和 www.a.con/bjs同一域名，不同协议
www.a.con/als和 http://127.0.0.100/bjs域名和域名对应ip
www.a.com/ajs和 script.a.com/bjs主域相同，子域不同
www.a.comn/ajs和 a.com/bis同一域名，不同二级域名(同上)
www.a.com/ajs和 www.b.corT/b.js不同域名

跨域是什么

当一个资源从与该资源本身所在的服务器不同的域或端口请求一个资源时，资源会发起一个跨域HTTP请求。

出于安全原因，浏览器限制从脚本内发起的跨源HTTP请求。例如，XMLHittpRequest和FetchAPI遵循同源策略。这意味着使用这些API的Web应用程序只能从加载应用程序的同一个域请求HTTP资源。

常见跨域分为以下两种:

  • 完全跨域:就是指一个顶级域名方向另一个顶级域名。
  • 跨子域:相同顶级域名下的两个子级域名相互通信。

常见跨域

HTML页面中一些允许指定路径的元素具有跨域特性:

<link>元素

<script>元素

<img>元素

<ifrane>元素

<script src="https://cdn.bootcss.com/iquery/3.3.1/iquery.js"></script>
<link href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet">
<img
src="http://c.hiphotos.baidu.c.m/image/pic/item/b58f8c5494eef01f40ef23e9edfe9925bc317d26.jpg">

JSONP是什么

JSONP ( JSON with Padding )是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。 利用<script>元素的这个开放策略，网页可以得到从其他来源动态产生的JSON资料，而这种使用模式就是所谓的JSONP。

<script>元素

网页通过添加一个<script>元素，向服务器请求JSON数据，这种做法不受同源政策限制;服务器收到请求后，将数据放在一个指定名字的回调函数里传回来。

网页通过添加一个<script>元素，向服务器请求JSON数据，这种做法不受同源政策限制;服务器收到请求后，将数据放在一个指定名字的回调函数里传回来。

function addScriptTag(src) {
	var script = document.createElement('script');
	script.setAttribute("typ.e","text/iavascript");
	script.src = src;
	document.body.appendChild(script);
}
window.onload = function () {
	addScriptTag('http://127.0.0.1:3000?callback=foo');
}
function foo(data) {
	console.log('Your public lP address is:' + data.ip);
}

$.getJSON()方法

jQuery中的$.getJSON()方法允许通过使用JSONP形式的回调函数来加载其他网域的JSON数据。

$.getJSON('http://127.0.0.1:3000?callback= ?',function(data){
	console.log(data);
});

注意: $.getJSON()方法的第一个参数表示url，需要在该参数后面添加“calback=?”。jQuery将“?”自动替换为正确的函数名，以执行回调函数。

$.getJSON()方法

jQuery中的$.getJSON(方法允许通过使用JSON净形式的回调函数来加载其他网域的JSON数据。

$.getJSON('http://127.0.0.1:30ooPcallback=?',function(data){
	console.log(data);
});

注意:$.getJSON()方法的第一个参数表示url，需要在该参数后面添加“callback=?”。jQuery将“?”白动替换为正确的函数名，以执行回调函数。

avatar
文章
阅读
粉丝