提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

1.跨域

(1.1) 跨域的基本概念

          如果用户访问我们的A服务器的网页，网页内部的AJAX去请求B服务器的数据接口，就算是B服务器、把json数据发送给了用户的浏览器，但是浏览器因为同源策略的原因，会阻止数据使用，这种现象就是跨域了。

        具体的跨域的两个服务器的标识是：协议 ip port

 （1）概念：浏览器为了用户的信息安全，网页中有一个网络请求技术：ajax在做网络请求时，请求的网址和当前页面的网址不是同一台服务器，就会被拒绝。
        跨域的两个条件:非同源 ajax

什么是同源策略
==>浏览器的一种安全策略，指两个网址的协议 ip port 三者一样代表同源

//同源==>pathname不参与同源判断
http://www.baidu.com/index.html
http://www.baiud.com/home/goods/ajax1

//异源 ==>域名(ip:port)不一样
http://www.hqyj.com/index.html
http://www.hqyj.con/ajax

//异源 ==>域名(ip:port)不一样
http://www.hqyj.com/index.html //假设解析DNS为192.168.6.86:8000
http://192.168.6.86:8000/ajax

(1.2) 接口的跨域问题

1.主要有两种方案：
        CORS(主流的解决方案，推荐使用)
        JSONP(有缺陷的解决方案：只支持GET请求)
    
2.使用cors中间件解决跨域问题
       使用步骤分为如下三步：
            (1) 运行npm install cors安装中间件
            (2) 使用const cors=require("cors")导入中间件
            (3) 在路由之前调用app.use(cors())配置中间件

2.CORS

（2.1）什么是cors，cors原理

  (1) 什么是cors?
     ==>   cors(跨域资源共享)由一系列http响应头组成，这些http响应头决定浏览器是否阻止前端js代码跨域获取资源
        浏览器的同源安全策略默认会阻止网页“跨域”获取资源，但如果接口服务器配置了cors相关的http响应头，就可以解除浏览器端的跨域访问限制。

cors的注意事项：
           (1) cors主要在服务器端进行配置，客户端浏览器无须做任何额外的配置，即可请求开启了cors的接口
            (2)cors在浏览器中由兼容性，只有支持XMLHttpRequest Level2的浏览器，才能正常访问开启了cors的服务器端接口。

  cors的原理：

         在实际生产或者项目的开发阶段，有时候真的需要跨域访问资源，可以在后端发送数据包时，在数据包的头部配置，这个数据包被跨域请求时的，跨域资源共享，白名单
          也就是：res.setHeader("Access-Control-Allow-Origin","具体的白名单域0,可以配置*")

（2.2） CORS跨域资源共享--CORS的三个响应头

（1）CORS响应头部--Access-Control-Allow-Origin

 (1) CORS响应头部--Access-Control-Allow-Origin
    响应头部中携带一个Access-Control-Allow-Origin字段，

        语法：Access-Control-Allow-Origin:|*
    Origin参数的值指定了允许访问该资源的外域URL
   

 例如:下面的字段值将只允许来自http://itcast.cn的请求：
        res.setHeader('Access-Control-Allow-Origin','http://itcast.cn') 

（2）CORS响应头部--Access-Control-Allow-Headers  

 (2) CORS响应头部--Access-Control-Allow-Headers
        默认情况下，CORS仅支持客户端向服务器发送如下的9个请求头：
            Accep、tAccept-Language、 Content-Language 、DPR 、Downlink、 Save-Date、 Viewport-width 、width 、Content-Type、(值仅限于text/plain、 mulitport/form-data、 application/x-www-form-urlencoded三者之一)
        如果客户端向服务器发送了额外的请求头消息，则需要在服务器端，通过Access-Control-Allow-Headers对额外的请求头进行声明，否则这次请求会失败

例如：
res.setHeader('Access-Control-Allow-Headers','Content-Type','X-custom-Headers')

（3） CORS响应头部--Access-Control-Allow-Methods

  (3) CORS响应头部--Access-Control-Allow-Methods
        默认情况下，CORS仅支持客户端发起GET POST HEAD请求
        如果客户端希望通过PUT DELETE等方式请求服务器的资源，则需要在服务器端，通过Access-Control-Allow-Methods来指明实际请求所允许使用的HTTP方法。
        示例如下：
           

 //允许所有的HTTP请求方法：
    res.setHeader('Access-Control-Allow-Methods','*')
//只允许POST GET DELETE HEAD请求方法：
    res.setHeader('Access-Control-Allow-Methods','POST,GET,DELETE,HEAD')

（2.3）CORS请求的分类

  客户端在请求CORS请求时，根据请求方式和请求头的不同，可以将CORS的请求分为两大类：
        (1)简单请求
            （1）请求方式：GET POST HEAD三者之一
            （2）HTTP头部信息不超过以下几种字段:无自定义头部字段、Accept、 Accept-Language、 Content-Language 、DPR 、Downlink 、Save-Date 、Viewport-width、 width、 Content-Type、(只有三个值text/plain、 mulitport/form-data、 application/x-www-form-urlencoded)
        (2)预检请求
            （1）请求方式为GET POST HEAD之外的请求Method类型
            （2）请求头中包含自定义头部字段
            （3）向服务器发送了application/json格式的数据
        在浏览器于服务器正式通信之前，浏览器会先发送OPTION请求进行预测，以获知服务器是否允许该实际请求，所以这一次的OPTION请求称为"预检请求"
        服务器成功响应预检请求后，才会发送真正的请求，并且携带真实数据。

简单请求和预检请求的区别
    简单请求的特点：客户端和服务器之间只会发生一次请求
    预检请求的特点：客户端和服务器之间会发生两次请求，OPTION预检请求成功之后，才会发起真正的请求。

3.JSONP

（3.1）JSONP的概念以及特点

JSONP接口
    JSONP概念：浏览器通过