刷新页面时出现错误消息“在此服务器上找不到请求的URL”

如何解决刷新页面时出现错误消息“在此服务器上找不到请求的URL”

我将第一个Angular项目上载到生产中。 该网站可在此处访问：http://urigross.com 当我在地址字段“ urigross.com”中键入内容时，网站运行正常。 刷新页面时，我收到一条错误消息。例如，当我在地址字段中键入准确的路由（例如“ www.urigross.com/heb/about”）时，也会发生这种情况。我尝试的每条路线都会发生这种情况。 错误消息是：

”未找到 在此服务器上找不到请求的URL。

此外，尝试使用ErrorDocument处理请求时遇到了404 Not Found错误。”

我尝试与站点支持联系，他们告诉我我的角度路由可能配置不正确。 该网站在我的电脑上使用“ ng s”命令可以在本地完美运行。 我尝试在stackoverflow上搜索，但结果是针对php而不是角度项目。

我的路由代码：

import { NgModule } from '@angular/core';
import { Routes,RouterModule } from '@angular/router';
import { HomeComponent } from 'src/app/components/home/home.component';
import { AboutComponent } from 'src/app/components/about/about.component';
import { ContactComponent } from 'src/app/components/contact/contact.component';
import { Page404Component } from 'src/app/components/page404/page404.component';
import { PlywoodHomeComponent } from 'src/app/components/plywood/plywood-home/plywood-home.component';
import { MdfHomeComponent } from 'src/app/components/mdf/mdf-home/mdf-home.component';
import { TegoHomeComponent } from 'src/app/components/tegoShuttering/tego-home/tego-home.component';
import { HardwoodsHomeComponent } from 'src/app/components/hardwood/hardwoods-home/hardwoods-home.component';
import { MapComponent } from 'src/app/components/map/map.component';
import { OsbFjHomeComponent } from 'src/app/components/OsbFj/osb-fj-home/osb-fj-home.component';


const routes: Routes = [
  { path: 'heb/home',component: HomeComponent},{ path: 'heb/about',component: AboutComponent},{ path: 'heb/plywood1',component: PlywoodHomeComponent},{ path: 'heb/mdf',component: MdfHomeComponent},{ path: 'heb/hardwood',component: HardwoodsHomeComponent},{ path: 'heb/plywood2',component: TegoHomeComponent},{ path: 'heb/plywood3',component: OsbFjHomeComponent},{ path: 'heb/contact',component: ContactComponent},{ path: 'heb/map',component: MapComponent},{ path: 'heb/page404',component: Page404Component},{ path: '',redirectTo: '/heb/home',pathMatch: 'full' },// Default redirect ( When inserting Domain name).
  // { path: '**',component: Page404Component }
  { path: '**',redirectTo: '/heb/page404',pathMatch: 'full'}  // Redirect when invalid address typed


];

@NgModule({
  declarations: [],imports: [
    RouterModule.forRoot(routes)
  ],exports: [RouterModule]
})
export class RoutingModule { }

解决方法

您的服务器是Apache。您可以使用.htaccess来解决此问题，这是因为您具有客户端路由，但是当直接命中服务器时，Web服务器并不知道路由。

RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

来自here

我已经为基于React的SPA之一做了类似的事情，也应该适用于您的Angular应用

,

服务器需要配置为发送index.html作为404的响应，因为这是angular中唯一的html文件。开发过程中，Angular cli对此进行了处理。

还要检查位置策略

,

this answer by @kiranvj 也为我解决了这个问题。但我有一个重要的观察。

如果您在服务器上有子域，将他的答案中的代码片段添加到根公共文件夹中的 // // This doesn´t work from styled-components DOCS // { // "plugins": [ // [ // "babel-plugin-styled-components",// { // "ssr": false // } // ] // ] // } // This works! { "presets": ["next/babel"],"plugins": [["styled-components",{ "ssr": true }]] } 文件中，它将对所有子域产生影响。

如果您想对特定子域产生不同的效果，您可以更改该子域根文件夹中的 .htaccess 文件。