浏览器,服务器,网络

### 同源策略是什么?

### javascript跨域通信

同源:两个文档同源需满足

- 协议相同
- 域名相同
- 端口相同
跨域通信:js进行DOM操作、通信时如果目标与当前窗口不满足同源条件,浏览器为了安全会阻止跨域操作。跨域通信通常有以下方法
- 如果是log之类的简单单项通信,新建<img>,<script>,<link>,<iframe>元素,通过src,href属性设置为目标url。实现跨域请求
- 如果请求json数据,使用<script>进行jsonp请求
- 现代浏览器中多窗口通信使用HTML5规范的targetWindow.postMessage(data, origin);其中data是需要发送的对象,origin是目标窗口的origin。window.addEventListener(‘message‘, handler, false);handler的event.data是postMessage发送来的数据,event.origin是发送窗口的origin,event.source是发送消息的窗口引用
- 内部服务器代理请求跨域url,然后返回数据
- 跨域请求数据,现代浏览器可使用HTML5规范的CORS功能,只要目标服务器返回HTTP头部**Access-Control-Allow-Origin: ***即可像普通ajax一样访问跨域资源

----------

所谓的跨域问题是由于浏览器的同源策略限制的,当协议域名端口号不同即为跨域,对于协议和端口来说,前端不能解决。解决跨域的几种方式:
- JSONP 跨域 :
> 这种方式跨域是通过script标签引入js文件,这个js文件又会返回一个js函数调用,也就是请求后通过callback的方式回传结果优点:
1.不受同源策略的限制
2.兼容性更好
3.支持老版本浏览器
缺点:只支持get请求
- CORS 跨域
> 其原理是使用自定义的http头部请求,让浏览器与服务器之间进行沟通,从而决定请求或响应是否成功
优点:
1.支持所有类型的http请求
2.比jsonp有更好的错误处理机制
3.被大多数浏览器所支持
- h5的postMessage方法
> window.postMessage(message,targetOrigin) 方法是html5新引进的特性,可以使用它来向其它的window对象发送消息,无论这个window对象是属于同源或不同源,目前IE8+、FireFox、Chrome、Opera等浏览器都已经支持window.postMessage方法。这种方法不能和服务端交换数据,只能在两个窗口(iframe)之间交换数据

[前端面试查漏补缺--(三) 跨域及常见解决办法][1]

### get/post区别
- 表单的method属性设置post时发送的是post请求,其余都是get请求
- get请求通过url地址发送请求参数,参数可以直接在地址栏中显示,安全性较差;post是通过请求体发送请求参数,参数不能直接显示,相对安全
- get请求URL地址有长度限制,根据浏览器的不同,限制字节长度不同,post请求没有长度限制

##### 补充get和post请求在缓存方面的区别
- get请求类似于查找的过程,用户获取数据,可以不用每次都与数据库连接,所以可以使用缓存。
- post不同,post做的一般是修改和删除的工作,所以必须与数据库交互,所以不能使用缓存。因此get请求适合于请求缓存。

### http/https区别
- https协议需要到ca申请证书,一般免费证书较少,因而需要一定费用。
- http是超文本传输协议,信息是明文传输,https则是具有安全性的ssl加密传输协议。
- http和https使用的是完全不同的连接方式,用的端口也不一样,前者是80,后者是443。
- http的连接很简单,是无状态的;HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议,比http协议安全

### 你了解的http状态码
- 1** 信息,服务器收到请求,需要请求者继续执行操作(101,升级为websocket协议)  
- 2** 成功,操作被成功接收并处理(206,部分内容,分段传输)  
- 3** 重定向,需要进一步操作以完成请求(301,302重定向;304命中缓存)  
- 4** 客户端错误,请求包含语法错误或无法完成请求(401,要求身份验证;403,服务器理解客服端需求,但是禁止访问)  
- 5** 服务器错误,服务器在处理请求的过程中发生了错误

### 应用程序存储和离线web应用
HTML5新增应用程序缓存,允许web应用将应用程序自身保存到用户浏览器中,用户离线状态也能访问。 1.为html元素设置manifest属性:<html manifest="myapp.appcache">,其中后缀名只是一个约定,真正识别方式是通过text/cache-manifest作为MIME类型。所以需要配置服务器保证设置正确 2.manifest文件首行为CACHE MANIFEST,其余就是要缓存的URL列表,每个一行,相对路径都相对于manifest文件的url。注释以#开头 3.url分为三种类型:CACHE:为默认类型。NETWORK:表示资源从不缓存。 FALLBACK:每行包含两个url,第二个URL是指需要加载和存储在缓存中的资源, 第一个URL是一个前缀。任何匹配该前缀的URL都不会缓存,如果从网络中载入这样的URL失败的话,就会用第二个URL指定的缓存资源来替代。以下是一个文件例子:

```
CACHE MANIFEST

CACHE:
myapp.html
myapp.css
myapp.js

FALLBACK:
videos/ offline_help.html

NETWORK:
cgi/
```
### 客户端存储localStorage和sessionStorage
- localStorage有效期为永久,sessionStorage有效期为顶层窗口关闭前
- 同源文档可以读取并修改localStorage数据,sessionStorage只允许同一个窗口下的文档访问,如通过iframe引入的同源文档。
- Storage对象通常被当做普通javascript对象使用:通过设置属性来存取字符串值,也可以通过setItem(key, value)设置,getItem(key)读取,removeItem(key)删除,clear()删除所有数据,length表示已存储的数据项数目,key(index)返回对应索引的key

```
localStorage.setItem(‘x‘, 1); // storge x->1
localStorage.getItem(‘x); // return value of x

// 枚举所有存储的键值对
for (var i = 0, len = localStorage.length; i < len; ++i ) {
var name = localStorage.key(i);
var value = localStorage.getItem(name);
}

localStorage.removeItem(‘x‘); // remove x
localStorage.clear(); // remove all data
```

### cookie及其操作
- cookie是web浏览器存储的少量数据,最早设计为服务器端使用,作为HTTP协议的扩展实现。cookie数据会自动在浏览器和服务器之间传输。
- 通过读写cookie检测是否支持
- cookie属性有名,值,max-age,path, domain,secure;
- cookie默认有效期为浏览器会话,一旦用户关闭浏览器,数据就丢失,通过设置max-age=seconds属性告诉浏览器- cookie有效期
- cookie作用域通过文档源和文档路径来确定,通过path和domain进行配置,web页面同目录或子目录文档都可访问
- 通过cookie保存数据的方法为:为document.cookie设置一个符合目标的字符串如下
- 读取document.cookie获得‘; ‘分隔的字符串,key=value,解析得到结果

```
document.cookie = ‘name=qiu; max-age=9999; path=/; domain=domain; secure‘;

document.cookie = ‘name=aaa; path=/; domain=domain; secure‘;
// 要改变cookie的值,需要使用相同的名字、路径和域,新的值
// 来设置cookie,同样的方法可以用来改变有效期

// 设置max-age为0可以删除指定cookie

//读取cookie,访问document.cookie返回键值对组成的字符串,
//不同键值对之间用‘; ‘分隔。通过解析获得需要的值
```
### 前端本地存储
[前端面试查漏补缺--(四) 前端本地存储][2]

### 渲染机制及重绘和回流
[前端面试查漏补缺--(五) 渲染机制及重绘和回流][3]

### 浏览器缓存
[前端面试查漏补缺--(六) 浏览器缓存][4]

### 从输入URL到看到页面发生的全过程(含三握手,四挥手详解)
[前端面试查漏补缺--(十二) 从输入URL到看到页面发生的全过程(含三握手,四挥手详解)][5]

[1]: https://juejin.im/post/5c6bca00f265da2dcf627aaa
[2]: https://juejin.im/post/5c6bcdc8e51d45209a1ca3b6#heading-10
[3]: https://juejin.im/post/5c6c182ee51d45760b1c8e30
[4]: https://juejin.im/post/5c6c9c99f265da2d896326ae
[5]: https://juejin.im/post/5c6f9d24e51d4511dd3fd0a2

原文地址:https://www.cnblogs.com/shucher/p/10457929.html

时间: 2024-11-05 14:39:05

浏览器,服务器,网络的相关文章

关于服务器网络编程

关于服务器网络编程,个人觉得有以下几点是要了解的: ①. tcp是一个流,所以会出现粘包现象,关于粘包以及解决可参考 http://blog.csdn.net/zhangxinrun/article/details/6721495  http://blog.csdn.net/zhangxinrun/article/details/6721495 这两篇博文. tcp的三次握手和断开连接的四次握手原理,time_wait状态,有时间的话可以再读读那本tcp/ip经典书,熟悉tcp/ip协议栈. ②

服务器网络配置

例如将服务器网络配置设置如下 IP:172.16.1.10 Mask:255.255.00 Gateway:172.16.1.1 DNS:202.0.20.106 设置如下: 先查看ip地址,此时ip地址为:172.18.12.68 输入命令cd /etc/sysconfig/network-scripts/ 第一个文件夹为默认网络地址文件夹进入修改即可 修改结果如下:此时ip地址为172.16.1.0 网关为172.15.1.1 子网掩码:255.255.255.0 修改成功!

查看Linux服务器网络状态(转)

转载自http://blog.chinaunix.net/uid-26413552-id-3202366.html 查看Linux服务器网络状态 ifconfig 用来显示所有网络接口的详细情况的,如:ip地址,子网掩码等. ethx是以太网网卡的名称. 配置文件在/etc/sysconfig/network-scripts/ifcfg-eth0中 DEVICE="eth0" HWADDR="00:0C:29:68:C0:8C" NM_CONTROLLED=&quo

Linux服务器 -- 网络篇

希望大家看完此文后,能很清楚明白你的服务器的网络情况,能很轻松的配置其网络环境.Linux服务器在装完系统,配置其网络环境是每一个system administrator的职能. 一.服务器的网络配置 在服务器的网络配置时,喜欢图形的朋友可用setup或system-config-network来配置. 网卡配置文件为/etc/sysconfig/network-scripts/ifcfg-eth0,设置完毕后直接用service network restart生效 [[email protec

discuz论坛X3升级时 文件下载出现问题,请查看您的服务器网络以及data目录是否有写权限

discuz论坛2.5升级X3时候, 在线升级一半提示: 文件 static/image/postbg/3.jpg 下载出现问题,请查看您的服务器网络以及data目录是否有写权限,请确认无误后点击确定 出现这个问题请找到 source/admincp/admincp_upgrade.php 这个文件 将文件中的 $offset = 100 * 1024; 替换为 $offset = 0; 解决完毕!

ASP.NET 表单验证方法与客户端(浏览器)服务器交互机制的故事

想到这个问题完全是一个意外吧,是在寻找另外一个问题答案的过程中,才对验证方法与浏览器服务器交互机制的关系有了清晰的认识. 先说下验证方法,验证方法分为前台验证和后台验证. 前台验证就是类似jQuery.Validate这类的插件,当然也可以我们自己写. 后台验证就是ASP.NET自带的验证控件,如RequiredFieldValidator. 记得初学.NET的时候,那会儿接触验证控件,也知道验证分为前台,后台.但是随着时间的推移,由于做的项目基本上都是公司内部使用的软件,比如OA.因为这种项目

配置服务器网络环境思路

[实践]配置服务器网络环境思路 对于总是学习理论知识的我来说,对于实践的应用还是比较少的:昨天给学院配置服务器,搭建网络环境,就是这个就折腾了很久,毕竟我是对linux系统是完全不懂的萌新,而且系统还是centos6.8的web server版本,没有桌面,只有写命令:确实很麻烦:不过收获也很多吧,现在就把一些遇到的问题以及解决方案记录下来.作为我的一个经验的积累: 虽然最后因为挂ssh太慢了.还是装回了centos6.8 桌面版:所以也没有那么多图可以记录的,就只有慢慢阐述了: 操作系统:ce

5种服务器网络编程模型讲解(转)

作者:快课网——Jay13 原文链接:http://www.cricode.com/3510.html 本文介绍几种服务器网络编程模型.废话不多说,直接正题. 1.同步阻塞迭代模型 同步阻塞迭代模型是最简单的一种IO模型. 其核心代码如下: 1 2 3 4 5 6 7 8 bind(srvfd); listen(srvfd); for(;;){ clifd = accept(srvfd,...); //开始接受客户端来的连接 read(clifd,buf,...);       //从客户端读取

常见的服务器网络问题

常见的服务器网络问题1.节点.节点的意义及中国骨干网节点的分布?CHINANET骨干网的拓扑结构逻辑上分为两层,即核心层和大区层.核心层核心层由北京.上海.广州.沈阳.南京.武汉.成都.西安等8个城市的核心节点组成.核心层的功能主要是提供与国际internet的互联,以及提供大区之间信息交换的通路.其中北京.上海.广州核心层节点各设有两台国际出口路由器,负责与国际internet互联,以及两台核心路由器与其他核心节点互联:其他核心节点各设一台核心路由器. 核心节点之间为不完全网状结构.以北京.上

Linux shell脚本判断服务器网络是否可以上网

Linux shell脚本判断网络畅通 介绍 在编写shell脚本时,有的功能需要确保服务器网络是可以上网才可以往下执行,那么此时就需要有个函数来判断服务器网络状态 我们可以通过curl来访问 www.baidu.com,从而判断服务器网络状态是否可以畅通的 网络状态判断 #!/bin/bash #检测网络链接畅通 function network() { #超时时间 local timeout=1 #目标网站 local target=www.baidu.com #获取响应状态码 local