Question

我有一个Web应用程序，其前端是使用React（create-react-app）完成的，它部署在Heroku上。后端使用node.js / express完成，并在Amazon EC2上运行。如果我使用HTTP http://myapp.heroku.com访问它，那么当我在localhost或Heroku上部署前端时，我没有任何问题让应用程序工作。当我使用HTTPS（Heroku上的默认值）访问https://myapp.heroku.com时，会出现问题。当我这样做并向Amazon EC2上的node.js服务器发送请求时，我收到以下错误：

Error: Network Error
Stack trace:
createError@https://myapp.herokuapp.com/static/js/bundle.js:1555:15
handleError@https://myapp.herokuapp.com/static/js/bundle.js:1091:14

这是前端中将请求发送到node.js服务器的部分：

_deflateAscii(valueAscii){
axios.post('//My-EC2-Instance-Here.compute.amazonaws.com:80/deflate/ascii', {inflatedAscii: valueAscii}).then(res => {
  this.setState(
    {
      inflatedAscii: valueAscii,
      inflatedHex: res.data.inflatedHex,
      deflatedBase64: res.data.deflatedBase64,
      deflatedHex: res.data.deflatedHex
    },
    this._setTextBoxesValues
  );
}).catch((err) => {
   console.log(err)});
  }

以下是我在服务器端使用的模块：

const express = require('express');
const cors = require('cors');
const http = require('http');

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));
app.use(cors());

处理来自前端的请求的部分：

app.post('/deflate/ascii', function(req, res){
try{
  console.log('request received');
  var inflatedHexValue = convert.asciiToHex(req.body.inflatedAscii);
  var deflatedBase64Value = deflate.asciiToBase64(req.body.inflatedAscii);
  var deflatedHexValue = deflate.asciiToHex(req.body.inflatedAscii);
}catch(err){
  console.log(err);
  res.status(500).send(err);
}
response = {
  deflatedBase64: deflatedBase64Value,
  deflatedHex: deflatedHexValue,
  inflatedHex: inflatedHexValue
};
res.end(JSON.stringify(response));
console.log('response sent');
});

当我上前端的网络错误，Node.js的服务器没有收到请求，但我已经做了一些诊断使用Wireshark并没有和与EC2服务器握手，但交通到此为止无任何HTTP流量：

TCP-traffic between https://myapp.heroku.com/ and My-EC2-Instance-Here.compute.amazonaws.com

如果前端是HTTPS，我是否需要在后端使用SSL？从这篇文章中我了解到它也可以没有Do we need ssl certificate for both front end and backend?。无论如何，这只是一个课程项目，只有无意义的字符串来回传递。

Answer 1

当您在浏览器中通过https访问站点时，需要禁用对混合内容（http和https）的阻止。结果，您的浏览器将连接分类为不安全。因此，可以的是，对于后端和前端都使用SSL / TSL。

Alos您尝试使用

res.json(response);
res.status(200).end();

还是将标头设置为application / json？建议您将res调用放入try catch块中，因为您的res.end仍会执行。

React - 仅在使用HTTPS

1 个答案: