01-跨域介绍

1.1.跨域固定报错格式`

-   只要是出现跨域问题，浏览器就会出现一个固定格式(没有之一)的报错信息
    -   `Access to XMLHttpRequest at '服务器url地址' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.`

1.2什么是跨域？

浏览器使用 `ajax`时，如果请求了接口地址和 当前打开的页面地址不同源称之为跨域

    -   （1）ajax : 浏览器只有使用ajax发送请求才会出现跨域。 href属性与src属性不会出现跨域
    -   （2） 接口地址 ： ajax请求的url
    -   （3）打开的页面：当前页面的window.location.href
    -   （4）不同源 ： 浏览器使用ajax,向不同源的接口发送请求，称之为 跨域访问

1.3.什么是同源？

-   同源定义 ： 两个url地址的 `协议` 与 `主机` 与 `端口` 均一致 (&&)

    -   协议：http , https , file
    -   主机 ： 域名或者ip地址 （127.0.0.1）
    -   端口 ：3000， 4399

-   不同源定义： 两个url地址，`协议 主机 端口`任何一个不一致 （||）

    -   `http:127.0.0.1:3000/abc`
    -   `http:127.0.0.1:3000/efg`
    -   `https:127.0.0.1:3000/efg`
    -   `http:127.0.0.1:3000/hero/add`
    -   `http:127.0.0.1:4399/hero/add`
    -   `http:127.0.0.1:4399/hero/all`

1.4.为什么要有同源与不同源？

-   出于安全考虑，浏览器不允许，页面向不同源的接口请求数据，因为如果 接口 和 网页不同源，浏览器认为是2个不同的 服务器，

-   不同的服务器中内容是不可控的，不允许访问了

-   总结： `浏览器为了保护你的电脑安全`

    -   举个栗子： 你去肯德基店里点餐，店员只允许你点肯德基的产品（炸鸡，可乐，上校鸡块），如果此时你在肯德基店里面点麦当劳的产品，浏览器会认为你是坏人，就会让保安把你赶出去

02.跨域解决方案介绍

1.跨域解决方案一： CORS

1.1-CORS工作原理介绍

CORS :全称cross origin resource share （资源共享）
工作原理：服务器在返回响应报文的时候，在响应头中设置一个允许的header
- res.setHeader('Access-Control-Allow-Origin', '*');
- 这行代码的意思是：服务器对浏览器说：老铁我是个好人，不要拒绝我！

1.2-express使用中间件cors ：给所有的res添加默认请求头Access-Control-Allow-Origin

express有一个自带的中间件cors，它的作用是自动给每一个res设置默认请求头
这样就不用我们自己每一个接口都要设置一次了
www.npmjs.com/package/cor…

用法介绍
cors中间件是最简单的中间，底层原理如下

app.use((req, res, next) => {//任何请求都会进入这个use中间件
  res.setHeader('Access-Control-Allow-Origin', '*')//设置响应头
  next()//执行下一个中间件
})

2.跨域解决方案二：原生jsonp

了解jsonp原理，首先一定要明白script标签的src属性做了什么事情
- (1)scr属性会给服务器发送请求, 请求一个js文件
- (2)浏览器会解析执行这个js文件里面的代码
  - 如果浏览器直接返回js代码,浏览器会立即执行

1.JSONP的核心原理：如果script标签的src属性的请求，服务器返回的是一个函数调用。则浏览器会执行这个函数
- 这是浏览器script标签的一个的漏洞（历史遗留问题）
2.实际开发中JSONP的工作流程

（1）设置script标签的src属性，向一个不同源的接口发送一个get请求
- JSONP只支持get请求，不支持post
（2）src属性发送请求时，在参数中额外携带一个callback的参数，参数值是一个在页面中预先定于好的函数名
- callback : 这是发明jsonp技术的人提出的一个君子之约，只要是jsonp前端程序员都统一将参数名定义为callback
- PS：别的参数也行，只要和服务器协商好
- callback属性值：预先定义的函数名，这个函数必须要在script标签之前定义
(3)服务器接收到请求之后，获取callback的参数值

(4)服务器将要响应的数据拼接成 函数调用格式，通过传参的方式将响应数据返回给浏览器
3.JSONP与CORS区别
- CORS：
  - 服务器返回响应头，前端无需任何处理
  - 简单快捷，支持所有请求方式
- JSONP
  - 浏览器：自定义响应回调函数，使用script标签的src请求
  - 利用浏览器的src属性没有跨域这一限制特点
  - 服务器：接收callback参数，返回函数调用
  - 处理复杂，并且只支持get请求
  - 原因：get请求参数直接在url后面拼接，而post请求参数是放在请求体中

02-HTTP原理

1.1-协议

1.协议概念: 制定客户端与服务器之间的通讯规则。不同的协议的作用也不同。
2.http协议

● HTTP(HyperText Transfer Protocol) 超文本传输协议。

● 协议双方：浏览器与web服务器

● 请求由浏览器发起的

● HTTP 协议中明确规定了请求数据和响应数据的格式(报文)

○ 浏览器请求资源要遵守 http 协议：请求报文（请求行，请求头，请求体）

○ 服务器返回资源要遵守 http 协议：响应报文（响应行，响应头，响应体）

1.2-端口

1.一个IP地址的端口可以有65536个，范围是从[0，65535]）。不同的端口被不同的软件占用，以提供不同的服务。
- ip地址: 找到你的电脑 ( 一台电脑只有一个ip )
- 端口号: 找到电脑上具体的软件 ( 一台电脑可以有很多个端口号 )
2.一台电脑可以通过安装多个服务器端软件来提供服务，比如Web服务、FTP服务、SMTP服务等。显然，仅仅通过ip地址是无法区分不同的服务的，这里就需要用到 “IP地址+端口号”来区分不同的服务。
3.通俗的来讲:
- 一台电脑只有一根网线,只会有一个ip. 所有的网络传输都是通过这根网线传输的, 但是电脑上有很多软件,你的操作系统是怎么知道这个网络请求是发给哪一个软件的。所以每一个软件都会有一个端口号。
- 端口：一个软件服务对应一个端口
- 通过netstat -a -n -o 查看端口使用情况

1.3-Content-Type

1.content-type作用
- 在http协议中，content-type用来告诉对方本次传输的数据的类型是什么。
2.请求头中的content-type
- 在请求头中设置content-type来告诉服务器，本次请求携带的数据是什么类型的
3.响应头中的content-type
- 在响应头中设置content-type来告诉服务器，本次返回的数据是什么类型的
4.常见的conteng-type
- .html：res.setHeader('content-type', 'text/html;charset=utf8')
- .css：res.setHeader('content-type', 'text/css;charset=utf8')
- .js：res.setHeader('content-type', 'application/javascript')
- .png：res.setHeader('content-type', 'image/png')
- json数据：res.setHeader('content-type', 'application/json;charset=utf-8')

其它类型，参考这里：developer.mozilla.org/en-US/docs/…

ajax跨域问题和http协议分析

01-跨域介绍

1.1.跨域固定报错格式`

1.2什么是跨域？

1.3.什么是同源？

1.4.为什么要有同源与不同源？

02.跨域解决方案介绍

1.跨域解决方案一： CORS

1.1-CORS工作原理介绍

1.2-express使用中间件cors ： 给所有的res添加默认请求头Access-Control-Allow-Origin

2.跨域解决方案二：原生jsonp

02-HTTP原理

1.1-协议

1.2-端口

1.3-Content-Type

1.2-express使用中间件cors ：给所有的res添加默认请求头Access-Control-Allow-Origin