一、XHR面板
chrome开发者工具是个很齐全的前端调试工具，涉及的内容较多，可以调试DOM、CSS兼容，打断点调试Javascript，还可以根据各类输出优化性能。这一次，我们只讲前端与后端数据联调部分，所以我们重点关注network面板。
前后端数据交互，多是XHR（JS的一套HTTP调用接口）类型的请求，打开XHR面板，点击任意一条xhr资源name可以看到该资源的详细信息：
包括如下tab信息：
- Headers 该资源的HTTP头信息。
- Preview 根据你所选择的资源类型（JSON、图片、文本）显示相应的预览。
- Response 显示HTTP的Response信息。
- Cookies 显示资源HTTP的Request和Response过程中的Cookies信息。
- Timing 显示资源在整个请求生命周期过程中各部分花费的时间。
二、页签说明
Headers页签
General
- Request URL ：Client请求地址，后端给你的url地址，对应ajax请求中的url。
- Request Method：请求类型 get、post、put、delete等，对应ajax请求中的type。
- Status Code：响应状态码 200、404、503等，后端返回的响应代码，可根据响应码判断是否成功建立连接
- Remote Address：域名对应的真实ip:port
Response header
- Content-Type：响应内容的格式/类型text/html;charset=UTF-8标识返回的内容是文本类型，html格式。
后端返回的文件类型 - Content-Encoding：web服务器支持的返回内容压缩编码类型 gzip
此类选项，多在nginx中配置，前后端联调时较少关注，主要用于压缩代码的传输格式，性能优化手段中常用。
Request header
- Accept：客户端/发送端能够接收的数据类型 text/html,application/xhtml+xml,application/xml；
- Accept-Encoding：浏览器可以支持的- web服务器返回内容压缩编码类型 gzip, deflate
- Content-Type: 请求内容的格式/类型 application/x-www-form-urlencoded application/json
对应fetch中的content-type，多数用于联调第一个接口，范式定义了，后续更改较少。 - Cookie: 客户端缓存的Cookie，在请求时发送给服务端验证身份
- Host: 请求的服务器域名
- Referer: 当前请求的来源
Form data(post)/Query String Parameter(get)
- Form data(post)：Request Method为post请求类型时显示的post表单数据。
- Query String Parameter(get)：Request Method为get请求类型时向服务端传递的请求参数。
你发送给后端的参数，都在此选项中查看，如有rap文档，可与rap文档对比查询参数。
Preview页签
Preview页签展示请求响应后的预览，以json形式解析后端返回的数据。
Response页签
Response页签显示响应的具体内容，查看后端返回给你的数据，一般是先看response标签页查看返回的数据是否符合要求，如果符合要求再查看Preview标签解析数据（有机会补足后端返回错误的失败案例）。
Cookie页签
Cookie页签以key-value形式展示客户端所有的Cookie信息，查看Cookie是否正确。
三、服务请求被代理
前后端联调时，第一个遇到的大老虎即是跨域，我们先来看看为什么会有跨域这个问题出现：
- 跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript施加的安全限制。
在参与出未校园项目和来米项目时，发现页面加载URL的IP和向后端发送请求的IP是一样的，这个就痛苦了，我怎么知道连接的后端到底是哪个IP？
vue-cli和create-react-app为了解决跨域问题，采用了http-proxy-middleware中间件。设置proxyTable代理当前地址向后端发送请求，我们先来看看实现原理：
- 浏览器禁止跨域，服务端并不禁止跨域，所以浏览器可以发送请求给自己的服务端，然后由自己的服务端再转发给要跨域的服务端。
这也就是为什么我们看到的发送给后端服务的请求IP与页面加载的url中的IP一致。proxyTarget属性的值，就是你实际请求的地址，这里写的就是程序员哥哥给你的ip，你也可以在启动的时候console.log输出这个地址。
三、常见错误分析
1、常见的跨域报错： Access-Control-Allow-Origin
前后端联调，查看到status code 报400，打开console控制台，看到Access-Control-Allow-Origin这样的提示信息，这就是跨域问题引起的报错，这就要看你的团队中的跨域解决方案了，如果是后端配置跨域头，那这就需要去找后端解决。也可以参见前面介绍的http-proxy-middleware中间件，设置proxyTable代理。
跨域知识扩展：
当发生跨域请求时，fetch或ajax会先发送一个options请求，来确认服务器是否允许接受请求。服务器同意后，返回status code 值为200，才会发送真正的请求，第二次请求中才会看到发送请求的参数。
与后端或APP联调时如何定位问题