前端开发面试总结（五）

JSONP实现跨域的方式

1、解决跨域问题的缘由：解除同源策略对于浏览器的限制。

同源策略：同源策略是一种约定，是浏览器最基本最核心的安全功能。是为了防止浏览器受到XSS，CSRF等攻击。

同源指的是协议、端口、域名都相同时，则为同源。若是这三个中只要有一个不一样也不是同源。

同源策略的限制：

• 一、Cookie、localStorage和indexDB没法读取。
• 二、DOM和JS对象不能得到
• 三、AJAX不能发送

虽然同源策略有一些限制，可是容许<script>标签的src属性，<link>标签的ref属性和<img>标签的src属性跨域进行资源请求。

2、跨域 跨域指的是一个域之下的脚本或者文档去请求另外一个域之下的资源，这个过程就是跨域。

3、实现跨域的方式 一、JSONP实现跨域 JSONP实现跨域的原理：动态建立<script>标签，利用<script>的src属性不受同源策略的限制，实现跨域获取数据。 JSONP由两部分组成：回调函数和数据。回调函数是响应在该页面触发时调用的函数。程序示例：

前端代码以下：

//动态建立<script>标签，而且设置src的值
var script = document.createElement("script");
script.src = "https://api.douban.com/v2/book/search?q=javascript&count=1&callback=handleResponse";
document.body.insertBefore(script, document.body.firstChild);

function handleResponse(response){
    //对response数据操做的代码
}
复制代码

服务端代码以下：

//这里的handleCallback是服务端接收到回调函数名参数后构造生成的
handleCallback({"status": true, "user": "admin"})
复制代码

JSONP实现跨域的方法只能用于GET请求，获取到的是JavaScript执行代码。

CORS实现跨域

• 相比于JSONP方式，CORS支持POST提交，经过CORS实现跨域的原理就是在响应头header中注入Access-Control-Allow-Origin，就能够实现跨域的操做了。CORS须要浏览器和服务器同时支持，目前绝大多数浏览器都支持，IE浏览器不能低于IE10。使用CORS实现跨域的过程是浏览器自动完成的，只要服务器端实现了CORS接口就能够实现跨域通讯。

• 对于简单请求，浏览器会直接发送CORS请求，具体说来就是在header中加入origin请求头字段。一样，在响应头中，返回服务器设置的相关CORS头部字段，Access-Control-Allow-Origin字段为容许跨域请求的源。请求时浏览器在请求头的Origin中说明请求的源，服务器收到后发现容许该源跨域请求，则会成功返回。

COSR字段介绍

（1）Access-Control-Allow-Methods

该字段必需，它的值是逗号分隔的一个字符串，代表服务器支持的全部跨域请求的方法。注意，返回的是全部支持的方法，而不单是浏览器请求的那个方法。这是为了不屡次"预检"请求。

（2）Access-Control-Allow-Headers

若是浏览器请求包括Access-Control-Request-Headers字段，则Access-Control-Allow-Headers字段是必需的。它也是一个逗号分隔的字符串，代表服务器支持的全部头信息字段，不限于浏览器在"预检"中请求的字段。

（3）Access-Control-Allow-Credentials

该字段与简单请求时的含义相同。

（4）Access-Control-Max-Age

该字段可选，用来指定本次预检请求的有效期，单位为秒。上面结果中，有效期是20天（1728000秒），即容许缓存该条回应1728000秒（即20天），在此期间，不用发出另外一条预检请求。