Приложение Vue.js, работающее на nginx, используя Axios / Express, теряет HTTPS и становится HTTP после входа в систему

Question

Мое приложение Vue.js переключается с HTTPS на HTTP после входа пользователя, и я не уверен, почему. Внешний интерфейс Vue.js обслуживается с помощью nginx и использует Axios для доступа к внутреннему API-интерфейсу Express, который запрашивает данные на локальном сервере MongoDB и на удаленном сервере SQL Server. Если бы кто-то мог дать какое-либо руководство, это было бы очень ценно, поскольку это относится к рабочему проекту.

Я не уверен, что это может быть подсказкой, но после входа в сеанс в приложении, еслиЯ открываю новую вкладку и вручную ввожу URL-адрес для представления, которое не имеет доступа к серверной части Express (https://subdomain.website.com/view_that_doesnt_access_express_api),), сайт будет защищен по протоколу HTTPS, но если я сделаю то же самое с представлением, которое имеет доступЭкспресс-сервер (https://subdomain.website.com/view_that_accesses_express_api), сайт будет небезопасным, а HTTPS в строке адреса отображается перечеркнутым красным.

nginx настроен с SSL и перенаправляет с 80 на 443 следующим образом (/ etc / nginx / sites-available / project):

server {
    listen 80;
    server_name subdomain.website.com;
    return 301 https://$server_name$request_uri;
}

server {
        listen 443 ssl;
        server_name _;
        ssl_certificate /path/to/my/cert.crt;
        ssl_certificate_key /path/to/my/key.rsa;
        root /path/to/my/dist;
        index index.html

        access_log /var/log/nginx/site.access.log;
        error_log /var/log/nginx/site.error.log;

        location / {
            try_files $uri /index.html =404;
        }
}

Сервер Express также настроен на HTTPS (app.js) с теми же файлами сертификации, что и nginx:

var httpscert = fs.readFile('cert.crt');
var httpskey = fs.readFile('key.rsa);

var options = {
    key: httpskey,
    cert: httpscert
};

var server = https.createServer(options, app);
server.listen(3000, function () {
    console.log("Express HTTPS running on 3000");
})

Axios (Service.js):

import Api from '@/services/Api'

export default {
    loginUser (email, password) {
        return Api().post('login', {
            email: email,
            password: password
        })
    }
}

Axios (Api.js):

import axios from 'axios'

export default() => {
    return axios.create({
        baseURL: 'https://192.168.10.117:3000'
    })
}

Это мой первый вопрос по StackOverflow, поэтому, пожалуйста, дайте мне знать, если яне правильно задаю этот вопрос.

Спасибо.

Answer 1

Вы сказали:

, но если я сделаю то же самое с представлением, которое имеет доступ к серверной части Express (https://subdomain.website.com/view_that_accesses_express_api),, сайт будет небезопасным, а HTTPS в расположенииполоса показана перечеркнутой красным.

Это не означает, что ваши настройки неверны, это просто означает, что у вас на этой странице есть ресурс, который обслуживается через HTTP, а не HTTPS. И вот почемублокировка пересечена.

Вы должны проверить исходный код своей страницы и проверить наличие сценариев или стилей, которые загружаются через HTTP. Измените их на HTTPS, и все будет хорошо.