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

关于跨域

根据浏览器同源策略（协议、域名、端口一致为同源），凡是发送请求的源与当前页面的源不同的即为跨域。同源策略用于隔离潜在的恶意文件。
这种情况称为预检(Preflighted)的跨域请求
当HTTP请求出现以下两种情况时，浏览器认为是带预检(Preflighted)的跨域请求：

解决方式

JSONP：只支持GET，不支持POST请求；
原理：浏览器只对XHR请求有同源限制，对script标签src属性，link标签ref属性和img标签src属性没有限制。
代理：使用代理去避开跨域请求，写一个后台接口，在后端去调用该不通源请求地址；
服务端修改：在服务端页面添加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认证相关数据）。

1). 除GET、HEAD和POST(only with application/x-www-form-urlencoded, multipart/form-data, text/plain Content-Type)以外的其他HTTP方法。
2). 请求中出现自定义HTTP头部。

带预检(Preflighted)的跨域请求需要浏览器在发送真实HTTP请求之前先发送一个OPTIONS的预检请求，检测服务器端是否支持真实请求进行跨域资源访问，真实请求的信息在OPTIONS请求中通过Access-Control-Request-Method Header和Access-Control-Request-Headers Header描述，此外与简单跨域请求一样，浏览器也会添加Origin Header。服务器端接到预检请求后，根据资源权限配置，在响应头中放入Access-Control-Allow-Origin Header、Access-Control-Allow-Methods和Access-Control-Allow-Headers Header，分别表示允许跨域资源请求的域、请求方法和请求头。此外，服务器端还可以加入Access-Control-Max-Age Header，允许浏览器在指定时间内，无需再发送预检请求进行协商，直接用本次协商结果即可。浏览器根据OPTIONS请求返回的结果来决定是否继续发送真实的请求进行跨域资源访问。这个过程对真实请求的调用者来说是透明的。