Смешанный контент с сервером heroku
Имея эту конфигурацию на стороне клиента (на основе реакции)
export const config = {
API_URL: process.env.NODE_ENV === 'production' ? 'https://myserverapp.herokuapp.com/' : 'http://mywebapp/'
}
При развертывании его на сервере (некотором сервере общего хостинга) и отправке запросов на мой внутренний сервер (люмен на основе сервера heroku) я получаю эту ошибку -
Mixed Content: The page at 'https://mywebapp.com/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://myserverapp.herokuapp.com/items'. This request has been blocked; the content must be served over HTTPS.
- вначале приложение было создано с помощью Angular, и все работает отлично! Теперь при переключении на реакцию возникает эта ошибка.
Что происходит? Как я могу это исправить?
@ NirBen-Yair привет, да, он работает в производственном режиме. Я знаю это, потому что я установил некоторые условия для режима производства / разработки, и все они действуют так, как ожидалось.
ваше приложение "mywebapp" работает на https?
@ NirBen-Yair да, это так
ну, ваш запрос API по какой-то причине должен быть на http://myserverapp.herokuapp.com/items, он должен быть на https
@ NirBen-Yair да, это то, чего я не могу понять
В моих случаях все было хорошо, я просто выключил и включил кнопку переключения «Heroku Hobby», и он начал работать
Ответы 2
Вы можете просто пойти на:
'//myserverapp.herokuapp.com/'
Если вы хотите написать протокол и по-прежнему избегать смешанного содержимого, используйте:
location.protocol + '//myserverapp.herokuapp.com/'
Удаление этого комментария для будущих пользователей, которые столкнутся с этой проблемой
Ошибка вызвана попыткой загрузить небезопасный скрипт «HTTP» с защищенного URL-адреса «HTTPS».
Исправить 1
Одним из способов решения проблемы является посещение небезопасной версии сайта (например, http://whatever.herokuapp.com), но это плохое решение, потому что ваши зрители не будут знать, в чем проблема, что приводит нас к Исправлению 2.
Исправить 2
Получите URL-адрес, чтобы определить, какой протокол использует данный экземпляр. В PHP я сделал это, используя следующие строки кода
if (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on'){ $protocol = "https://".$_SERVER['HTTP_HOST']; } else{ $protocol='http://'.$_SERVER['HTTP_HOST']; }
а затем добавление протокола ко всему, что вы импортируете со своего веб-сайта.
Если импорт осуществляется с внешнего веб-сайта, просто замените http в теге script или теге style на https.
Надеюсь это поможет.
На веб-странице https вы можете сделать только запрос AJAX на веб-страницу https, я думаю, ваш код работает в производственном режиме в режиме «разработки», вы проверяли, что он работает в «производственном» режиме?