【解决使用fetch发送json格式的post请求报错问题】_fetch post json

link之家
链接快照平台
输入网页链接，自动生成快照
标签化管理网页链接
解决使用fetch发送json格式的post请求报错问题：

今天，在使用Fetch用法以 POST请求方式的参数传递时，可传输的数据格式有 x-www-form-urlencoded 和 json 两种。以 x-www-form-urlencoded 格式传参时，可以正常得到后台响应的数据，但是以 json 格式传输时出现报错。先记录解决此问题的过程。
使用 Fetch 以 json 格式的 post请求代码如下
fetch('http://localhost:3000/books', {
      method: 'post',
      body: JSON.stringify({
        uname: '张三',
        pwd: '456'
      }), // 请求参数，JSON.stringify() JS 数据对象转换为 JSON 字符串
      headers: {
        'Content-Type': 'application/json'
      .then(function (data) {
        return data.text();
      }).then(function (data) {
        console.log(data)
      });
 后台关于解决跨域访问的请求头设置 
// 设置允许跨域访问该服务
app.all('*', function (req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");  // 允许访问该资源的外域 URL。*允许来自任何域的请求
  res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
  res.header("Access-Control-Allow-Headers", "X-Requested-With"); // 额外的请求头进行声明， 允许客户端向服务器发送X-Requested-With的请求头信息
  res.header('Access-Control-Allow-Headers', 'Content-Type'); // 允许客户端向服务器发送Content-Type的请求头信息
  res.header('Access-Control-Allow-Headers', 'mytoken');
  next();
});
// POST请求接口
app.post('/books', (req, res) => {
  res.send('POST请求传递参数!' + req.body.uname + '---' + req.body.pwd)  // body-parser 中间件提供的 body 属性
报错提示：
 
解决方案：
 
 方案1. 注释掉跨域里请求头设置中有mytoken那一行。 
 方案2. 把请求头中 Access-Control-Allow-Headers 中的内容合并为一行。 
方案1代码： 
app.all('*', function (req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");  // 允许访问该资源的外域 URL。*允许来自任何域的请求
  res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
  res.header("Access-Control-Allow-Headers", "X-Requested-With"); // 额外的请求头进行声明， 允许客户端向服务器发送X-Requested-With的请求头信息
  res.header('Access-Control-Allow-Headers', 'Content-Type'); // 允许客户端向服务器发送Content-Type的请求头信息
  // res.header('Access-Control-Allow-Headers', 'mytoken');
  next();
});
方案2代码： 
app.all('*', function (req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");  // 允许访问该资源的外域 URL。*允许来自任何域的请求
  res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
  res.header("Access-Control-Allow-Headers", "X-Requested-With,Content-Type,mytoken"); // 额外的请求头进行声明， 允许客户端向服务器发送X-Requested-With，Content-Type，mytoken的请求头信息
  next();
});
修改后运行成功
 
使用方案1解决后访问成功 
使用方案2解决后访问成功 
 按照上述方法解决了使用fetch发送json格式的post请求报错问题，但关于为什么以这种方式可以访问成功的原理还没有深入研究，在此仅记录此次解决的方案，在后续的学习中对于原因还需要进行更多的学习。 
                    #解决使用fetch发送json格式的post请求报错问题：提示：这里简述项目相关背景：今天，在使用Fetch用法以 POST请求方式的参数传递时，可传输的数据格式有 x-www-form-urlencoded 和 json 两种。以 x-www-form-urlencoded 格式传参时，可以正常得到后台响应的数据，但是 以 json 格式传输时出现报错。先记录解决此问题的过程。问题描述提示：这里描述项目中遇到的问题：例如：数据传输过程中数据不时出现丢失的情况，偶尔会丢失一部分数据APP 中
letparamsArray = [];  
//拼接参数  
Object.keys(params).forEach(key => paramsArray.push(key + '=' + params[key]))  
if (url.search(/\?/) === -1) {  
   url += '?' + paramsArray.join('&')  
				### 回答1：
axios发送post请求报错500是因为服务器内部出现了错误，导致无法正常处理请求。可能是服务器代码出现了bug，或者是服务器配置不正确等原因导致的。需要检查服务器端的日志，查找具体的错误信息，然后进行相应的修复。同时，也可以尝试使用其他方式发送请求，比如使用fetch或者XMLHttpRequest等，看看是否能够正常处理请求。   
### 回答2：
当使用axios发送post请求时，如果返回的状态码是500，这意味着服务器在处理请求时出现了错误。这可能是由于各种原因造成的，例如服务器端的代码错误、服务器资源不足、数据库连接错误等。
首先，我们可以确保我们的请求参数是正确的并可以被服务器正确处理。我们可以通过打印日志来检查发送的请求和服务器返回的错误信息。如果我们的请求参数不正确或者格式不正确，服务器可能会返回一个500状态码。
其次，我们需要检查服务器端的代码是否正确。我们可以查看服务器端的日志文件或者调试工具来确定错误发生的位置。如果是服务器端代码问题，我们需要对代码进行修复或升级，然后重新部署服务器。
另外，服务器资源也可能是导致500错误的原因之一。我们可以检查服务器的资源使用情况，并增加服务器的内存、硬盘等配置以提高服务器的处理能力。
最后，我们可以尝试使用其他工具（如Postman）来发送相同的请求，以确定是否是axios本身的问题。如果仍然存在问题，我们可以尝试升级axios或者联系axios开发者团队来解决问题。
总之，当axios发送post请求返回500状态码时，我们需要仔细检查请求参数、服务器端代码、服务器资源等方面，以找到并修复错误。   
### 回答3：
Axios是一个流行的基于Promise的HTTP客户端，用于在浏览器和Node.js中进行请求。而当通过Axios发送POST请求时，有时候会出现500错误的情况。那么，我们该如何解决这个问题呢？
首先，需要了解“500”是服务器内部错误的 HTTP 状态代码，这表示服务器在处理请求时遇到问题。错误的原因可能是多方面的，例如服务器上的代码出现错误、服务器配置不正确或服务器资源耗尽等。
接下来，我们可以尝试进行以下几个步骤来解决这个问题：
1. 检查请求URL是否正确
首先，我们要确认API请求的URL是否正确。如果URL地址拼写错误或找不到资源，就会出现500错误。
2. 检查服务器端的API是否出错
如果请求URL没有问题，那么就要检查服务器端的API是否出错。可以通过在开发人员工具中查看响应内容或在控制台中打印一些输出信息来获取更多信息。
3. 检查请求参数是否正确
发送POST请求时，需要将数据作为payload数据（也就是请求体）发送给服务器。因此，也需要检查请求参数是否正确。可以使用Postman等工具模拟请求，检查请求参数是否与服务器预期的一致。
4. 检查请求头是否正确
有时，服务器需要在请求头中添加一些自定义的请求头（例如安全访问令牌或其他标识符）。因此，需要检查请求头是否正确设置。
通过以上步骤，可以解决大部分POST请求返回500错误的问题。如果问题仍然存在，可以尝试询问服务器管理员或开发人员是否有其他因素导致的问题。
				【解决使用webpack自动打包功能 ，报错 Content not from webpack is served from ‘ ‘ 且访问http://localhost:8080/ 为空 问题 】
					11759
                【解决使用webpack自动打包功能 ，报错 Content not from webpack is served from ‘ ‘ 且访问http://localhost:8080/ 为空 问题 】
                    Pluto_ssy: 
                    你没有重启吧
                【 解决 yarn 全局安装的包能够正常运行 的问题】
                    CSDN-Ada助手: 
                    Hi 博主，非常感谢您分享解决 yarn 全局安装包无法正常运行的问题。这篇文章对于那些遇到类似问题的读者来说，无疑是非常有帮助的。现在，您是否考虑写一篇关于“如何解决 npm 全局安装的包无法正常运行的问题”的博客呢？这个问题跟 yarn 类似，而且对于 JavaScript 开发者来说，这是一个非常普遍的问题。希望您能继续分享您的经验，帮助更多的开发者解决这个问题。
2023年博客之星「城市赛道」年中评选已开启（https://activity.csdn.net/creatActivity?id=10470&utm_source=blog_comment_city ），                博主的原力值在所在城市已经名列前茅，持续创作就有机会成为所在城市的 TOP1 博主（https://bbs.csdn.net/forums/blogstar2023?typeId=3152981&utm_source=blog_comment_city），更有丰厚奖品等你来拿~。
                【解决使用webpack自动打包功能 ，报错 Content not from webpack is served from ‘ ‘ 且访问http://localhost:8080/ 为空 问题 】
                    没有解决啊，还是can not的
                关于npm install 时报错errno ECONNREFUSED问题的解决
                    感谢大佬，问题解决！