Heroku混合内容HTTPS / HTTP问题

问题描述

我将我的应用部署到了Heroku，并且我一直在Chrome控制台中收到此错误消息：

I deployed my app to Heroku and I keep getting this error in the Chrome console:

bundle.js:11892 Mixed Content: The page at 'https://***.herokuapp.com/#/login'
was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint
'http://localhost:3000/login'. This request has been blocked; the content must
be served over HTTPS.(anonymous function) @ bundle.js:11892sendReq @
bundle.js:11653serverRequest @ bundle.js:11363processQueue @
bundle.js:16097(anonymous function) @ bundle.js:16113Scope.$eval @
bundle.js:17365Scope.$digest @ bundle.js:17181Scope.$apply @
bundle.js:17473(anonymous function) @ bundle.js:25159defaultHandlerWrapper @
bundle.js:3592eventHandler @ bundle.js:3580
bundle.js:11892 XMLHttpRequest cannot load http://localhost:3000/login. Failed
to start loading.

这是我的伺服器档案：

This is my server file:

let express = require('express');
let app = express();
let publicRouter = express.Router();
let apiRouter = express.Router();
let models = require(__dirname + '/models');
let bodyParser = require('body-parser');
let morgan = require('morgan');
let config = require(__dirname + '/config/env.js');

app.use(express.static(__dirname + '/build'));

app.use((req, res, next) => {
 res.header('Access-Control-Allow-Origin', 'http://localhost:8080');
 res.header('Access-Control-Allow-Headers', 'Content-Type, token, authorization');
 res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
 next();
})

require(__dirname + '/routes/auth-routes')(publicRouter, models);
require(__dirname + '/routes/users-routes')(apiRouter, models);
require(__dirname + '/routes/questions-routes')(apiRouter, models);
require(__dirname + '/routes/scores-routes')(apiRouter, models);

app.use(bodyParser.json());
app.use('/', publicRouter);
app.use('/api', apiRouter);
app.use(morgan('dev'));

app.listen(config.PORT, () => {
  console.log('server started on port ' + config.PORT);
});

我尝试将所有localhost：3000路由更改为https，但这并没有帮助。我认为这不起作用哈哈。我认为这可能是谷歌字体，但这是链接//fonts.googleapis.com/css?family=xxx+xxx+xxx这应该是很好去HTTPS。任何想法或建议？

I tried changing all the localhost:3000 routes to https but that did not help. I figured that wouldn't work haha. I thought it may be the google font but this is the link "//fonts.googleapis.com/css?family=xxx+xxx+xxx" which should be good to go for HTTPS. Any thoughts or suggestions?

推荐答案

在您的app.js或服务中，或者您打电话给服务器应用程序将地址从localhost：3000更改为https：//***.herokuapp.com：443 / yourendpoint。所以就像

In your app.js or service or where you're making your calls to the server in your app change the address from localhost:3000 to https://***.herokuapp.com:443/yourendpoint. So like

$http.get("https://***.herokuapp.com:443/api).then(function(response) {
...some code...;
})

也//***.herokuapp.com:443也应该可以工作

also "//***.herokuapp.com:443" should work as well

这篇关于Heroku混合内容HTTPS / HTTP问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！