前后端通信类问题汇总

同源策略

协议，域名 和 端口 http://www.baidu.com:80,三者必须都一样，否则跨域，
非同源操作不了 cookie,ajax,dom

HTTP/HTTPS协议

HTTP 是基于 TCP/IP 协议的应用层协议。默认使用80端口。
HTTPS协议：简单来说，可以理解为安全版的HTTP协议，基于TCP/IP协议和SSL/TLS协议之上的应用层协议。默认端口443。

HTTP协议以明文方式发送内容，不提供任何方式的数据加密，如果攻击者截取了Web浏览器和网站服务器之间的传输报文，就可以直接读懂其中的信息，因此HTTP协议不适合传输一些敏感信息，比如密码等。

为了解决HTTP协议的这一缺陷，需要使用另一种协议：安全套接字层超文本传输协议HTTPS。为了数据传输的安全，HTTPS在HTTP的基础上加入了SSL协议，SSL依靠证书来验证服务器的身份，并为浏览器和服务器之间的通信加密。缺点：1，申请证书需要钱，2，耗费性能，3.也不是绝对安全

http协议特点：
1.无状态：http协议没法保存客户机信息，也就没法区分每次请求的不同之处。关于http无状态阻碍了交互式应用程序的实现。比如记录用户浏览哪些网页、判断用户是否拥有权限访问等。于是，两种用于保持HTTP状态的技术就应运而生了，一个是Cookie，而另一个则是Session。
2，无连接：是限制每次连接只处理一个请求。服务器处理完客户的请求，并收到客户的应答后，即断开连接。采用这种方式可以节省传输时间。

HTTP协议工作流程

3次握手
客户端和服务器之间建立一条连接
连接建立后，客户端向服务器发起一个请求（request）
服务器收到一个请求后，给客户端一个响应（应答，response）
客户端收到响应后做进一步处理

OPTIONS请求是什么

OPTIONS是一个预请求，跨域的情况下，如果有以下情况发生，则会先发送OPTIONS，服务端允许才会
发送真正的请求，否则不会发送
1、请求方法不是GET/HEAD/POST
2、POST请求的Content-Type并非application/x-www-form-urlencoded, multipart/form-data, 或text/plain
3、请求设置了自定义的header字段

301 302区别

301和302都在response头里设置，301是永久重定向，302是临时重定向
301表示这个请求第一次请求服务器后，以后再发送就不询问服务器了，客户端直接跳转到新地址
302每次还是要访问服务器看有没有新的地址跳转

CSP 安全策略

缓解某些类型的攻击，包括跨站脚本 (XSS) 和数据注入等攻击。
后端response头设置X-Content-Security-Policy
也可在META标签内设置 <meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://*; child-src 'none';script-src userscripts.example.com">
一个网站管理者想要所有内容均来自站点的同一个源 (不包括其子域名)所有脚本必须从特定主机服务器获取可信的代码.

前端后端如何跨域通信

1.JSONP
2.websocket （不限制同源策略）
3.cros （支持同源，非同源通信）
4.postMessage (h5)

如何创建AJAX

ajax请求过程：创建XMLHttpRequest（兼容性）、连接服务器、发送请求、服务器做出响应、接收响应数据

GET,POST区别

1.GET后退按钮/刷新无害，POST数据会被重新提交（浏览器应该告知用户数据会被重新提交）
2.GET能被缓存，POST不能缓存 。
3.GET历史参数保留在浏览器历史中。POST参数不会保存在浏览器历史中
4.GET对数据长度有限制，当发送数据时，GET 方法向 URL 添加数据；URL 的长度是受限制的（URL 的最大长度是 2048 个字符）。POST无限制。
5.GET的数据在 URL 中对所有人都是可见的。POST的数据不会显示在 URL 中

jsonp

1.html标签的src属性没有同源限制（支持跨域）,创建script标签，src属性指向外部链接，并有一个和后端约定好的函数执行代码，服务端不再返回JSON格式的数据，而是返回一段调用某个函数的js代码，在src中进行了调用，这样实现了跨域

缺点：没有关于 JSONP 调用的错误处理。如果动态脚本插入有效，就执行调用；如果无效，就静默失败。失败是没有任何提示的