使用实质性的ui和axios在heroku上部署create-react应用

Question

我遇到类似以下错误：

  

混合内容：“ https://reactapp.herokuapp.com/”上的页面为   通过HTTPS加载，但请求了不安全的XMLHttpRequest端点   'http://api.//'。该请求已被阻止；内容必须是   通过HTTPS服务。

     

无法加载资源：服务器响应状态为404   （未找到）

Answer 1

Chrome浏览器默认情况下会阻止混合内容。当您的React应用通过https获得服务而api通过http获得服务时，它会阻止api服务。

解决此问题的一种方法是

• 修改后端服务器以使用https进行服务（使用https://letsencrypt.org/获得免费的SSL证书）
• 其他使用proxy来代理function dateDiff (date) { // date is unix timestamp date let d = moment(date); if ( d.isValid() ) { d.format("YYYY-MM-DD"); // moment() gives current date-time return moment().diff(d, 'weeks', true); // If past date then result will be positive if future date then negative. } else return null; } console.log( dateDiff( 1519945200000 ) ); // 30.648079404761905 // 30 weeks ago console.log( dateDiff( 1534395200000 ) ); // 6.755883640873016 // 6 weeks ago console.log( dateDiff( 1529945200000 ) ); // 14.113687873677248 // 14 weeks ago console.log( dateDiff( 1541945200000 ) ); // -5.7275819675925925 // 5 weeks in future 的api请求。这样，您的API后端也可以通过https解决混合内容问题。

有关部署到heroku的更多详细信息，请参见https://medium.freecodecamp.org/how-to-make-create-react-app-work-with-a-node-backend-api-7c5c48acb1b0。