同源和跨域详解

最新推荐文章于 2023-08-29 20:18:45 发布
最新推荐文章于 2023-08-29 20:18:45 发布
阅读量135 收藏 1
点赞数 1
文章标签： php 后端 javascript ViewUI
原文链接：http://www.cnblogs.com/why210/p/9519288.html
版权

同源

同源策略的基本概念

1995年，同源政策由 Netscape 公司引入浏览器。目前，所有浏览器都实行这个政策。同源策略：最初，它的含义是指，A网页设置的 Cookie，B网页不能打开，除非这两个网页"同源"。所谓"同源"指的是"三个相同"。


协议相同
域名相同
端口相同

举例来说，这个网址http://www.example.com/dir/page.html协议是http://，

域名是www.example.com，端口是80（默认端口可以省略）。它的同源情况如下。


http://www.example.com/dir2/other.html：同源
​
file:///F:/phpStudy/WWW/day01/04-demo/04.html 不同源(协议不同)
http://v2.www.example.com/dir/other.html：不同源（域名不同）
http://www.example.com:81/dir/other.html：不同源（端口不同）

同源策略的目的

同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。

同源策略的限制范围

随着互联网的发展，“同源策略”越来越严格，目前，如果非同源，以下三种行为都将收到限制。


1. Cookie、LocalStorage 和 IndexDB 无法读取。
2. DOM 无法获得。
3. AJAX 请求在浏览器端有跨域限制

虽然这些限制是很有必要的，但是也给我们日常开发带来不好的影响。比如实际开发过程中，往往都会把服务器端架设到一台甚至是一个集群的服务器中，把客户端页面放到另外一个单独的服务器。那么这时候就会出现不同源的情况，如果我们知道两个网站都是安全的话，我们是希望两个不同源的网站之间可以相互请求数据的。这就需要使用到跨域 。

跨域

jsonp( 无兼容性问题 )

JSONP(JSON with Padding)、可用于解决主流浏览器的跨域数据访问的问题。

原理：服务端返回一个定义好的js函数的调用，并且将服务器的数据以该函数参数的形式传递过来，这个方法需要前后端配合

script 标签是不受同源策略的限制的，它可以载入任意地方的 JavaScript 文件。类似的还有img和link标签


<!--不受同源策略限制的标签-->
<img src="http://www.api.com/1.jpg" alt="">
<link rel="stylesheet" href="http://www.api.com/1.css">
<script src="http://www.api.com/1.js"></script>

 

jsonp演化过程1

php文件


header("content-type:text/html;charset=utf-8");
echo "alert(1111)";

html文件


<script src="http://www.api.com/testjs.php"></script>

原理：其实src的路径是什么文件不重要，无论引入js文件还是php文件，最后返回给浏览器的都是字符串，因此我们script标签是可以引入一个php文件的。

 

jsonp演化过程2

php文件


header("content-type:text/html;charset=utf-8");
echo "var a = 118;";

html文件


<script src="http://www.api.com/testjs.php"></script>
<script>
  //a打印出来了118
  console.log(a);
</script>

我们现在做到了一件事情，从不同源的php文件中获取到了数据

 

缺点：获取数据的script标签必须写在使用的script标签的前面，必须保证先有数据才能对数据进行渲染。

 

jsonp演化过程3

php代码


header("content-type:text/html;charset=utf-8");
$arr = array(
    "name"=>"zs",
    "age"=>18
);
$result = json_encode($arr);
//这是一段js函数的调用的代码，$result就是我们想要的数据
echo "func($result)";

js代码


<script>
  function func(data) {
    console.log(data);
 }
</script>
<script src="http://www.api.com/testjs.php"></script>

 

缺点：后端必须知道前端声明的方法的名字，后端才能调用。

 

jsonp演化过程4

php代码


header("content-type:text/html;charset=utf-8");
$arr = array(
    "name"=>"zs",
    "age"=>18
);
$result = json_encode($arr);
//这是一段js函数的调用的代码，$result就是我们想要的数据
echo $_GET['callback']."($result)";

javascript代码


function fun(data) {
  console.log(data);
}
var button = document.querySelector("button");
button.onclick = function () {
  var script = document.createElement("script");
  script.src = "http://www.api.com/testjs.php?callback=fun";
  document.body.appendChild(script);
}

 

  1. 说白了，jsonp的原理就是 借助了script标签 src 请求资源时, 不受同源策略的限制.

  2. 在服务端返回一个函数的调用，将数据当前调用函数的实参。

  3. 在浏览器端，需要程序要声明一个全局函数，通过形参就可以获取到服务端返回的对应的值

 

jsonp原理大家需要知道，但不用太过于去纠结这个原理，因为jquery已经帮我们封装好了，我们使用起来非常的方便。

jquery对于jsonp的封装


//使用起来相当的简单，跟普通的get请求没有任何的区别，只需要把dataType固定成jsonp即可。
$.ajax({
  type:"get",
  url:"http://www.Jepson.com/testjs.php",
  dataType:"jsonp",
  data:{
    uname:"Jepson",
    upass:"123456"
 },
  success:function (info) {
    console.log(info);
 }
});

XMLHttpRequest2.0

XMLHttpRequest是一个javascript内置对象，使得Javascript可以进行异步的HTTP通信。2008年2月，就提出了XMLHttpRequest Level 2 草案。

老版本的XMLHttpRequest的缺点：


1. 仅支持传输文本数据，无法传说二进制文件，比如图片视频等。
2. 传输数据时，没有进度信息，只能提示完成与否。
3. 受到了"同源策略"的限制

 

新版本的功能：


1. 可以设置timeout超时时间
2. 可以使用formData对象管理表单数据
3. 允许请求不同域名下的数据（跨域）
4. 支持上传二进制文件
5. 可以获取数据传输的进度信息

timeout设置超时


xhr.timeout = 3000;//设置超时时间
xhr.ontimeout = function(){
  alert("请求超时");
}

formData管理表单数据

formData对象类似于jquery的serialize方法，用于管理表单数据


使用特点： 
1. 实例化一个formData对象， new formData(form); form就是表单元素
2. formData对象可以直接作为 xhr.send(formData)的参数。注意此时数据是以二进制的形式进行传输。
3. formData有一个append方法，可以添加参数。formData.append("id", "1111");
4. 这种方式只能以post形式传递，不需要设置请求头，浏览器会自动为我们设置一个合适的请求头。

 

代码示例：


//1. 使用formData必须发送post请求
    xhr.open("post", "02-formData.php");
    
//2. 获取表单元素
var form = document.querySelector("#myForm");
//3. 创建form对象，可以直接作为send的参数。
var formData = new FormData(form);
​
//4. formData可以使用append方法添加参数
formData.append("id", "1111");
​
//5. 发送，不需要指定请求头，浏览器会自动选择合适的请求头
xhr.send(formData);

 

文件上传

以前，文件上传需要借助表单进行上传，但是表单上传是同步的，也就是说文件上传时，页面需要提交和刷新，用户体验不友好，xhr2.0中的formData对象支持文件的异步上传。


var formData = new FormData();
//获取上传的文件，传递到后端
var file = document.getElementById("file").files[0];
formData.append("file", file);
xhr.send(formData);

 

显示文件进度信息

xhr2.0还支持获取上传文件的进度信息，因此我们可以根据进度信息可以实时的显示文件的上传进度。


1. 需要注册 xhr.upload.onprogress = function(e){} 事件，用于监听文件上传的进度.注意：需要在send之前注册。
2. 上传的进度信息会存储事件对象e中
3. e.loaded表示已上传的大小   e.total表示整个文件的大小

 

代码参考：


xhr.upload.onprogress = function (e) {
  
  inner.style.width = (e.loaded/e.total*100).toFixed(2)+"%";
  span.innerHTML = (e.loaded/e.total*100).toFixed(2)+"%";
}
​
xhr.send(formData);

如果上传文件超过8M，php会报错，需要进行设置，允许php上传大文件。

 

跨域资源共享(CORS) ( 兼容性IE10+ )

cors的使用

新版本的XMLHttpRequest对象，可以向不同域名的服务器发出HTTP请求。这叫做"跨域资源共享"（Cross-origin resource sharing，简称CORS）。

跨域资源共享（CORS）的前提

  • 浏览器支持这个功能( 兼容性IE10+ )

  • 服务器必须允许这种跨域。

服务器允许跨域的代码：


//允许所有的域名访问这个接口
header("Access-Control-Allow-Origin:*");
//允许www.study.com这个域名访问这个接口
header("Access-Control-Allow-Origin:http://www.study.com");

 

CORS的具体流程（了解）

  1. 浏览器发送跨域请求

  2. 服务器端收到一个跨域请求后，在响应头中添加Access-Control-Allow-Origin Header资源权限配置。发送响应

  3. 浏览器收到响应后，查看是否设置了header('Access-Control-Allow-Origin:请求源域名或者*');

    如果当前域已经得到授权，则将结果返回给JavaScript。否则浏览器忽略此次响应。

结论：

  1. 跨域行为是浏览器行为，响应是回来了的, 只是浏览器安全机制做了限制, 对于跨域响应内容进行了忽略。

  2. 服务器与服务器之间是不存在跨域的问题的

 

jsonp与cors的对比

  • jsonp兼容性好，老版本浏览器也支持，但是jsonp仅支持get请求，发送的数据量有限。使用麻烦

  • cors需要浏览器支持cors功能才行。但是使用简单，只要服务端设置允许跨域，对于客户端来说，跟普通的get、post请求并没有什么区别。

  • 跨域的安全性问题：因为跨域是需要服务端配合控制的 ，也就是说不论jsonp还是cors，如果没有服务端的允许，浏览器是没法做到跨域的。

转载于:https://www.cnblogs.com/why210/p/9519288.html

weixin_30697239
关注
浏览器同源和跨域概念
H4ppyD0g的博客
10-16 534
浏览器的同源策略是为了实现不同源的tab页（一个tab就是浏览器中一个标签页）之间相互隔离的一种安全策略。 可以理解为一个源内的脚本只能作用与本源内的资源，无法访问其他源的资源。 同源是指：协议、域名、端口都相同。这是一个三元组，源和域是一个意思。 非同源就是其中任何一个不相同。 非同源的限制，跨域限制主要的目的就是为了用户的上网安全 不能读取 cookie 无法获得dom 不能发送ajax请求 ...
Axios、同源策略和跨域、JSONP
不明真相的末影人
06-01 603
Axios基本概念 Axios 是专注于网络数据请求的库。 相比于原生的 XMLHttpRequest 对象，axios 简单易用。 相比于 jQuery，axios 更加轻量化，只专注于网络数据请求。 axios的基本使用方式 发起get请求： axios.get(请求地址,{params: 参数}).then(function (res) {}); 发起post请求： axios.post(请求地址,{data: 参数}).then(function (res) {}); axios.post(请求地
跨域和同源详解
sky89299的博客
04-05 2448
跨域 同源策略 开发过程中主要遇到的同源问题，主要是比较两个url是否同源。 判断条件 协议是否相同（http、https、file） 主机地址是否相同（www.xxx.com 127.0.0.1） 端口（0~65535）http默认的电动车需按扣是80（可以不写），https默认端口是443 ， MySQL默认的端口是3306 如果两个url协议、主机地址、端口都相同，那么这两个url是同源，否则就是非同源 非同源受到限制： Cookie无法操作 DOM无法操作 Ajax请求无效（请求
跨域？同源？一次搞懂什么是跨域
leoyongyuan的博客
07-01 1249
其实在我们用ajax传输数据时，很多时候都是在做跨域请求，如果没租过服务器的小伙伴可能没去捣鼓过这东西是什么。跨域其实在我们前后端数据交互非常常见，但是现在的模块化时代，一般我们不怎么会接触到跨域问题，因为很多事API已经帮我们解决了。接下来我就给大家好好捋清跨域是怎么回事。在先介绍跨域之前我觉得必须先普及同源策略的概念。 什么是同源？ 如果两个页面的协议，域名和端口都相同，则两个页面具有相同的源。 例如，下表给出了相对于http://www.test com/index.html页面的同源检测: 为了防
同源策略和跨域解决方案——JSONP、CORS、代理跨域（vue-cli脚手架搭建代理服务器）
最新发布
m0_55734628的博客
08-29 2859
在简单请求中，只要满足简单请求的要求，一般情况下，是不怎么需要服务端去进行配置的，除了Access-Control-Allow-Origin这个字段是必备的OPTIONS请求作为预检请求，就算请求方法没有在Access-Control-Allow-Methods规定范围内也不会出现错误，但是我们不能自己发送OPTIONS请求CORS跨域设置涉及到后端和前端的配合。后端通过设置响应头来允许特定的跨域请求，而前端则需要确保请求头中包含适当的信息。这样可以保障安全地进行跨域资源访问参考文档：MDN。
同源和跨域
前端小菜鸟也有人起的博客
04-03 321
同源和跨域
前端面试必备之同源和跨域详解
09-22
跨域是由浏览器的同源策略引起的，是指页面请求的url地址，必须与浏览器上url地址处于同域上（即域名，端口，协议相同），下面这篇文章就来给大家介绍了关于前端面试必备之同源和跨域的相关资料，文中通过示例代码...
a标签在同源html中跳转,前端面试必备之同源和跨域详解
weixin_30464195的博客
06-04 849
前言众所周知浏览器的同源策略及跨域的方法在前端面试中也是出场率极高的问题，本文主要跟大家分享了关于前端面试时会遇到的同源和跨域问题，下面话不多说了，来一起看看详细的介绍吧。什么是同源策略同源策略是用来限制从一个源加载的文档或者脚本如何与来自另一个源的资源进行交互，是一种用于隔离潜在的恶意文件的关键的安全机制。何谓同源如果协议、域名和端口对于两个页面来说是相同的，则这两个页面就是同源的。比如：htt...
Asp.netWebAPI解决跨域详解
01-27
【Asp.net WebAPI 解决跨域详解】 同源策略是浏览器为了保护用户信息安全而实施的一项安全机制，它规定Web页面只能发起同源（相同域名、端口和协议）的AJAX请求。这一策略限制了恶意网站通过JavaScript获取并操纵...
[Ajax学习笔记-16] XMLHttpRequest 的基本用法 同源和跨域 防抖和节流的使用
qq_64509600的博客
07-25 907
XMLHttpRequest的概念 XMLHttpRequest的使用 GET请求携带参数 POST请求携带参数 数据交换格式JSON 同源和跨域的概念 跨域配置解决方案 防抖 节流
同源与跨域
FantasyBreaker的博客
02-08 169
1995年，同源政策由 Netscape 公司引入浏览器。目前，所有浏览器都实行这个政策。同源策略：最初，它的含义是指，A网页设置的 Cookie，B网页不能打开，除非这两个网页"同源"。 所谓"同源"指的是"三个相同"：协议相同、域名相同、端口相同。 本域脚本只能读写本域内的资源，而无法访问其它域的资源。这种安全限制称为同源策略。 同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。 同源策略的限制： Cookie、LocalStorage 和 IndexDB 无法读取。 DOM 无法获得
同源跨域的概念与实现跨域的几种方案
好好睡觉
01-10 1251
同源政策、同源策略、跨域方法、iframe跨域方法、postmessage跨域、window.name跨域、片段识别符跨域、JSONP跨域、
跨域/解决跨域方法
song854601134的博客
12-19 4244
首先编写一个过滤器，可以起名字为MyCorsFilter.java} }.} }.} }.} }.} }.} }.} }.} }.} }.} }.} }.
什么是同源与跨域呢
weixin_64214997的博客
06-08 695
同源策略（英文全称 Same origin policy）是浏览器提供的一个安全功能。浏览器的同源策略规定：不允许非同源的 URL 之间进行资源的交互。同源指的是两个 URL 地址具有相同的协议、主机名、端口号。为什么要有同源与不同源？出于安全考虑，浏览器不允许，页面向不同源的接口请求数据，因为如果 接口 和 网页不同源，浏览器认为是2个不同的 服务...
Ajax跨域详解与示例
"本文将详细解释AJAX跨域问题及其解决方法，通过示例代码展示JSONP技术的应用。" 在Web开发中，由于浏览器的安全策略，同源策略限制了JavaScript从一个域向另一个域发送HTTP请求，这被称为跨域问题。AJAX...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值