使用js的fetch发送一个post请求浏览器却请求两次的原因

这个问题涉及到跨域请求，大概做一下笔记。

关于跨域

根据浏览器同源策略（协议、域名、端口一致为同源），凡是发送请求的源与当前页面的源不同的即为跨域。同源策略用于隔离潜在的恶意文件。

解决方式

1. JSONP：只支持GET，不支持POST请求；
   原理：浏览器只对XHR请求有同源限制，对script标签src属性，link标签ref属性和img标签src属性没有限制。
2. 代理：使用代理去避开跨域请求，写一个后台接口，在后端去调用该不通源请求地址；
3. 服务端修改：在服务端页面添加header限制：
   Header(‘Access-Control-Allow-Origin:*’)//允许所有来源访问
   Header(‘Access-Control-Allow-Method:POST,GET’)//允许访问的方式

关于CORS跨域资源共享机制

CORS跨域资源共享机制，允许web应用服务器进行跨域访问控制。
CORS允许在下列场景中使用跨域http请求：
XMLHttpRequest或Fetch发起的跨域HTTP请求；Web字体；WebGL贴图；样式表（使用CSSOM）；使用drawImage将Images/video 画面绘制到canvas。
CORS标准新增了一组http首部字段，允许服务器声明哪些源站通过浏览器可以访问哪些资源。另外，规范要求，对那些可能对服务器数据产生副作用的请求，必须首先使用options方法发起预检请求，获知服务端是否允许该跨域请求，允许之后才发起实际的HTTP请求，在预检返回的结果中，服务端也可以通知客户端是否需要携带身份凭证（cookies和http认证相关数据）。

今天项目中发现fetch请求只发送了一次，观察浏览器网络请求记录却发现两次请求，第一次成功第二次失败，还很奇怪为什么会有两次请求。。。现在终于恍然大悟哈哈哈！