let myHeaders = new Headers();
myHeaders.append('Content-Type', 'application/json');
let request = new Request('./api', {
method: 'POST',
mode: 'no-cors',
body:JSON.stringify(tubState),
headers:myHeaders
fetch(request)
.then(response => response.json())
.then(result =>{
将mode设置为no-cors 是指不允许发送跨域请求。执行以上代码后，得到以下报错信息：
两个报错信息，第一个提示：数据类型不支持
第二个提示：不是JSON数据
经过排查发现是如下原因导致：
在使用fetch时，如果设置mode : 'no-cors' 将会导致 request Header 不可变，也即不可设置。从第二张截图中我们发现，content-type 属性为text/plain, 而并非是我们所设置的application/json.所以也就产生了第二个报错信息。
问题的解决方法是：将mode 设置为 cors 即可
注意：在使用fetch post json 数据时，body字段应该使用JSON.stringify 序列化
2-25日补充：
fetch credentials
fetch请求默认是不带cookie 的，如果服务端需要接受cookie 做登陆验证的话，需要设置参数credentials : fetch(url, {credentials: 'include'})
credentials枚举属性决定了cookies是否能跨域得到。这个属性与XHR的withCredentials标志相同，但是只有三个值，分别是omit（默认）,same-origin以及include
Reference
fetch MDN document
Github issue
关于cors 以及 fetch
传统AJAX已死fetch永生
fetch web请求实践
fetch
场景在项目中使用fetch框架，向一个服务器发送JSON数据，请求方式为postlet myHeaders = new Headers();myHeaders.append('Content-Type', 'application/json');let request = new Request('./api', { method: 'POST', m...
详解使用fetch发送post请求时的参数处理
不考虑古董浏览器之后，使用fetch来发送ajax请求，变得非常爽快和时尚。
但是，发送post请求的时候，把笔者卡了一下。后台如下获取参数时，总是为null
String q = req.getParameter("q");
研究了好久，总算写出正确的使用方式了。直接上代码。
fetch("/search/project/", {
method: "POST",
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
body: "q=参数q
在react中利用fetch进行CORS跨域需要注意的点
当我们直接在fetch的url中输入完整的http时，就算加了"Access-Control-Allow-Origin": "*"也会报下面的错误：
Access to fetch at ‘http://xxx.xx.xxx.xx:8080/admin/onLogin’ from origin ‘http://localhost:3000...
postData('https://solelynet.com/public/index.php/api/v1/UserProduct/GetList', {//url 地址和请求参数调用下面postData方法
"is_page":true,
"currentPage":1,
"pagesize":2,
"thirdapp_id":2,}
.then(data => conso...
最近在看黑马的vue中fetch用法部分，前面的代码跟着老师敲都很顺利，做到使用fetch发送post的json格式数据格式这块...问题来了
看提示，应该是跨域问题，最终找到了解决办法
前台发送请求的代码：
fetch('http://localhost:3000/books', {
method: 'post',
body: JSON.stringify({
uname: 'zha...
letparamsArray = [];
//拼接参数
Object.keys(params).forEach(key => paramsArray.push(key + '=' + params[key]))
if (url.search(/\?/) === -1) {
url += '?' + paramsArray.join('&')
#解决使用fetch发送json格式的post请求报错问题：
提示：这里简述项目相关背景：
今天，在使用Fetch用法以 POST请求方式的参数传递时，可传输的数据格式有 x-www-form-urlencoded 和 json 两种。以 x-www-form-urlencoded 格式传参时，可以正常得到后台响应的数据，但是 以 json 格式传输时出现报错。先记录解决此问题的过程。
问题描述
提示：这里描述项目中遇到的问题：
例如：数据传输过程中数据不时出现丢失的情况，偶尔会丢失一部分数据
APP 中
学习vue的fetch发送post的json格式数据请求时发生了跨域报错，自己解决不了，常规操作上网看博客，找了很久，都是说在后台服务器设置跨域允许，但是我明明设置了呀，我看的黑马教程，明明和视频一毛一样了还是不行…一脸问号,终于在找了很久后迎来了曙光…废话不多说…
前台发送请求的代码：
fetch('http://localhost:3000/books', {
method: 'post',
body: JSON.stringify({
var xhr = new XMLHttpRequest();
xhr.open('POST', 'url', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
var data = {key1: 'value1', key2: 'value2'};
xhr.send(JSON.stringify(data));
或者使用fetch API：
fetch('url', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
body: JSON.stringify({key1: 'value1', key2: 'value2'})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
