Page refresh возвращает 404error с Polymer Firebase (не может найти маршрутизированную страницу)

В моем текущем проекте с Polymer & Firebase У меня проблема с обновлением страницы ни одна из моих маршрутизируемых страниц не найдена 404. Я создал новую проект, который производит ту же ошибку и размещает его с помощью firebase.

Я использую проверку подлинности Google и после успешной регистрации загружаю приложение, которое в основном представляет собой набор для полимеров. Я считаю, что проблема заключается в структуре моих страниц/проекта. Поскольку мое приложение - это всего лишь шлюз для моего сайта, который содержит маршрутизацию и соответствующие страницы. Я добавил изображение ниже, чтобы объяснить, как структурирован мой проект. Я также добавил изображение источника в моей консоли. когда они перенаправляются на страницу, а другая - при перезагрузке страницы.

Page refresh возвращает 404error с Polymer Firebase (не может найти маршрутизированную страницу)

Я был бы очень признателен, если кто-то находит время, чтобы посмотреть на этот

Изображение моей структуры проекта

Изображение моей консоли

firebase.json файл

{ 
    "database": { 
    "rules": "database.rules.json" 
    }, 
    "hosting": { 
    "public": "public" 
    } 
}

firebase.json файл из моего реального проекта с такой же проблемой

{ 
    "database": { 
    "rules": "database.rules.json" 
    }, 
    "hosting": { 
    "public": "public", 
    "rewrites": [ 
    { 
    "source": "**/!{*.*}", 
    "destination": "/index.html" 
    } 
    ] 
    } 
}

Код для моего index.html

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>polyfire</title> 
    <link rel="import" href="my-app.html"> 
    <style media="screen"> 
    body { 
    font-family: Roboto, Arial, sans-serif; 
    } 
    </style> 
</head> 
<body> 
    <my-app></my-app> 
</body> 
</html>

Код для моей моей-app.html

<link rel="import" href="my-login.html"> 
<link rel="import" href="my-site.html"> 

<dom-module id="my-app"> 
<template> 
    <style> 
    :host { 
     display: block; 
    } 
    </style> 

    <firebase-app 
    auth-domain="firebaseapp.com" 
    database-url="firebaseio.com" 
    api-key="..." 
    storage-bucket="gs://yole.appspot.com"> 
    </firebase-app> 

    <firebase-auth user="{{user}}"></firebase-auth> 

    <template is="dom-if" if="[[!user]]"> 
    <my-login></my-login> 
    </template> 

    <template is="dom-if" if="[[user]]"> 
    <my-site></my-site> 
    </template> 

</template> 

<script> 
    Polymer({ 
    is: 'my-app', 
    properties: {}, 
    }); 
</script>

код моего-login.html

<dom-module id="my-login"> 
<template> 
    <style> 
    :host { 
     display: block; 
    } 
    </style> 

    <firebase-auth 
    id="auth" 
    user="{{user}}" 
    status-known="{{statusKnown}}" 
    provider="google" 
    on-error="handleError"></firebase-auth> 

    <paper-button class="logInOutBtn" raised on-tap="login" hidden$="[[user]]">Sign-up with Google</paper-button> 
    <paper-button class="logInOutBtn" raised on-tap="logout" hidden$="[[!user]]">Sign-out</paper-button> 

</template> 

<script> 
    Polymer({ 
    is: 'my-login', 

    properties: { 
     user: { 
     type: Object, 
     }, 
     statusKnown: { 
     type: Object, 
     } 
    }, 
    login: function() { 
     this.$.auth.signInWithPopup(); 
    }, 
    logout: function() { 
     this.$.auth.signOut(); 
    }, 

    }); 
</script> 
</dom-module>

источник

2017-01-30 Niklas

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

Если вы используете firebase serve, вы можете позволить URL переписывания happen like so после указания этого в firebase.json:

{ 
    "database": { 
    "rules": "database.rules.json" 
    }, 
    "hosting": { 
    "public": "app", 
     "rewrites": [{ 
     "source": "**", 
     "destination": "/index.html" 
    }] 
    } 
}

В зависимости от конфигурации, возможно, придется изменить значение выше. Но в центре внимания находится часть rewrites.

Другой подход.

Если вы используете что-то вроде Gulp для обслуживания своего сайта, вы можете взглянуть на то, как переписывать URL-адреса на этом уровне. See this for a complete картина, но короче:

gulp.task('serve', function() { 
    browser.init({ 
     server: 'app/', 
     port: port, 
     middleware: [historyApiFallback()] // See link above for details 
    }); 
    ..... 
});

Я не знаю, как вы в конечном итоге развертывание вашего приложения, но нижняя линия может быть переписать URL.

источник

2017-01-30 20:06:04 Rexford

Большое спасибо за быстрый ответ. У меня было ощущение, что проблема связана с этим, но недостаточно опыта, чтобы знать, что именно происходит там. Я развертываю свое приложение с использованием firebase, в котором находится ссылка. Я обновил свой вопрос и включил свой файл firebase.json. – Niklas

@NiklasLang Если вы развернете Firebase, проверьте мой файл 'firebase.json' и посмотрите, как это делается, и попробуйте с вашей конфигурацией, если он работает. – Rexford

Человек, который вы быстро забеременели, и на вершине его он решил мою проблему в тестовом приложении и моем фактическом приложении. Спасибо – Niklas

Page refresh возвращает 404error с Polymer Firebase (не может найти маршрутизированную страницу)

ответ

Смежные вопросы