Question

我有一个ngrok在本地运行的react前端应用程序，因此我试图将提取请求发送到我添加到项目中的服务器-包含在客户端文件夹和express服务器中的react应用程序包含在服务器文件夹中。

因此，客户端获取发布请求确实命中了服务器端点，因为它控制着空主体，并且在ngrok上显示POST /，但没有给出状态！。但是在前端，它给出了一个错误的请求502错误和一个CORS错误，我尝试了在两侧启用CORS：

这是代码（控制台可以工作）：

客户：

  storeEmailData(domain, emailAddress, email, storeName) {

console.log('consoling the data IN API FILE' + domain);
console.log('consoling the data IN API FILE' + emailAddress);
fetch('https://3ecec55f.ngrok.io/', { 
  method: 'POST',
  mode: 'cors',
  data: {
    domain: domain,
    emailAddress: emailAddress,
    email: email,
    storeName: storeName,

  }

}, {mode: 'cors'} )

.then(function(response) {
  console.log('response' + response);
}).then(function(body) {
  console.log(body);
});
}

服务器：

var app = express();
var db = require('./data_db.js')
var cors = require('cors');
app.use(cors());
var bodyParser = require('body-parser')

app.use(bodyParser.json())

app.post('/', function (req, res) {
   console.log('the data' + JSON.stringify(req.body))


});

因此，服务器只是控制台一个空的主体。错误在前端内：

api.js:25 POST https://3ecec55f.ngrok.io/ 502 (Bad 
Gateway)
storeEmailData @ api.js:25
ReturnsSettings._this.saveDetails @ ReturnsSettings.js:45
onClick @ ReturnsSettings.js:66
settings:1 Access to fetch at 'https://3ecec55f.ngrok.io/' 
from origin 'https://c2bca71d.ngrok.io' has been blocked 
by CORS policy: No 'Access-Control-Allow-Origin' header is 
present on the requested resource. If an opaque response 
serves your needs, set the request's mode to 'no-cors' to 
fetch the resource with CORS disabled.
settings:1 Uncaught (in promise) TypeError: Failed to 
fetch

任何帮助将不胜感激，谢谢！

Answer 1

该fetch调用存在多个问题，尤其是服务器希望您发送JSON，但您并未这样做。您已将一个简单对象作为参数data传递给fetch，但传递给fetch doesn't support that。您可能是说body，但body的有效选项是：

body：要添加到请求中的任何正文：可以是Blob，BufferSource，FormData，URLSearchParams或{ {1}}个对象。

没有什么可以猜测您正在发送JSON。

总体而言，问题是：

使用USVString而不是data。
使用对象而不是字符串（JSON =字符串）。
未标识body（表示您正在发送JSON），因此将采用默认的URI编码形式。
将第三个参数传递给Content-Type，但是fetch仅接受两个。
不检查fetch的非网络故障。（很多人会犯此错误，所以我在贫乏的小博客上wrote it up的人很多。）
未获取fetch响应的正文。

修复这些问题：

fetch

......，其中fetch('https://3ecec55f.ngrok.io/', { method: 'POST', mode: 'cors', headers: { // *** 3 "Content-Type": "application/json" // *** 3 } // *** 3 body: JSON.stringify({ // *** 1, 2 domain: domain, emailAddress: emailAddress, email: email, storeName: storeName, }) // *** 2 }) // *** 4 .then(function(response) { if (!response.ok) { // *** 5 throw Error("HTTP status " + response.status); // *** 5 } // *** 5 return response.xyz(); // *** 6 }).then(function(body) { console.log(body); });是text，json，blob，arrayBuffer或formData，具体取决于服务器所答复的内容

旁注：您不需要xyz选项。当您将字符串作为第一个参数传递时，default mode是mode（在其中找到它有点棘手，但它在那里）。（但是您可能希望对那些可能不了解该代码的读者有所帮助。）

502向在ngrok上运行的应用发送发布请求时出错

1 个答案: