angular - 拒绝加载字体 - Angular 2

标签 angular routes

我从 Angular 2 开始,一直在研究路线。 当我没有路线时,一切正常,但现在每次我去/home 时,我都会收到此错误。

Refused to load the font 'data:font/woff;base64,d09GRgABAAAAAIw4ABEAAAABQcAAAQABAAAAAAAAAAAAAAAAAAAAA…hgZiCKVViwAiVhsAFFYyNisAIjRLMJCgMCK7MLEAMCK7MRFgMCK1myBCgGRVJEswsQBAIrAA==' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'font-src' was not explicitly set, so 'default-src' is used as a fallback.

我正在使用 HAML,但我认为这不是问题所在。 索引仍然是 .html 扩展名,这似乎也不会引起问题。

这是我的index.html。

<html>
  <head>
    <meta charset="UTF-8">
    <title>Freelance Bootcamp</title>
    <base href='/'>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>

  <body>
    <app>App Loading...</app>
  </body>
</html>

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpModule }    from '@angular/http';

import { AppComponent } from './app.component';
import { HomepageComponent } from './homepage/homepage.component';

import { AppRoutingModule } from './app-routing.module';

@NgModule({
    imports: [
        BrowserModule,
    HttpModule,
        AppRoutingModule
    ],
    declarations: [
        AppComponent,
        HomepageComponent
    ],
    bootstrap: [
        AppComponent
    ]
})
export class AppModule {}

app.component.ts

import { Component } from '@angular/core';

@Component({
    moduleId: module.id,
    selector: 'app',
    templateUrl: 'app.component.haml'
})
export class AppComponent {
    title: 'Freelance Bootcamp Dashboard';
}

homepage.component.ts

import { Component } from '@angular/core';

@Component({
    moduleId: module.id,
    selector: 'homepage',
    templateUrl: 'homepage.component.haml'
})
export class HomepageComponent {}

应用程序路由.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { HomepageComponent } from './homepage/homepage.component';

const routes: Routes = [
    { path: '', redirectTo: '/home', pathMatch: 'full' },
    { path: 'home', component: HomepageComponent },
]

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

当我转到 localhost:4200 时,redirectTo/home 可以工作。 如果我访问 localhost:4200/home,就会收到所描述的错误,并且我的页面会卡在“应用程序加载...”屏幕中。

如果有帮助,我通过键入以下内容使用 angular-cli 生成了应用程序:

ng new application

如果有人可以帮助我解决这个问题,那就太棒了,提前谢谢您。

我希望这是足够的信息。如果没有,请告诉我您还需要了解什么。

最佳答案

添加content security policy .

例如font-src 使用data:

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; font-src 'self' data:;">

如果您使用 CDN,请根据需要添加,例如对于fonts.gstatic.com:

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; font-src 'self' data: fonts.gstatic.com;">

关于angular - 拒绝加载字体 - Angular 2,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43078707/

相关文章:

javascript - 具有很少角色访问权限的 Angular JWT

ruby-on-rails - 将对象作为路径助手的参数传递

c# - 动态修改 RouteValueDictionary

php - CodeIgniter Route 适用于 CIFS 挂载,但不适用于本地文件

ruby-on-rails - rails路由中资源和资源的区别?

javascript - 使用 Angular 2 需要两个字段中的一个

typescript - 你如何在 Angular2 中对 NgFor 的结果运行一个函数?

javascript - Angular - 如何使用延迟加载模块激活 AUX 路由?

angular - 将指令附加到动态添加的元素

ruby-on-rails - 路径约束中的 Rails Active Record/数据库数据