拒绝加载字体-Angular 2 [英] Refused to load the font - Angular 2
问题描述
我从Angular 2开始，一直在研究路线。
当我没有路线时，一切都正常运行，但是现在每次去/ home时，都会出现此错误。
I am starting on Angular 2 and have been playing around with routes. Everything was working correctly when I did not have routes, but now every time I go to /home, I get this error.
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扩展名，似乎也不会引起问题。
I am working with HAML but I don't think that is the problem. Index is still .html extension which also doesn't seem to be causing problems.
这是我的index.html。
Here is my 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
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
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
homepage.component.ts
import { Component } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'homepage',
templateUrl: 'homepage.component.haml'
})
export class HomepageComponent {}
app-routing.module.ts
app-routing.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 {}
当我进入本地主机时，redirectTo / home可以正常工作： 4200。
如果我去localhost：4200 / home，那是当我得到描述的错误并且我的页面被卡在应用程序加载中...屏幕中。
The redirectTo /home works when I go to localhost:4200. If I go to localhost:4200/home, that's when I get the error described and my page gets stuck in the App Loading... screen.
如果有帮助，我可以通过键入以下内容来生成带有angular-cli的应用程序：
If it helps, I generated the application with angular-cli by typing:
ng new application
如果有人可以帮助我，那就太好了，谢谢你。
If anyone could help me with this, that would be amazing and thank you in advance.
我希望这是足够的信息。如果没有，请让我知道您还需要知道什么。
I hope this is enough information to go off of. If not, please let me know what else you need to know.
推荐答案
添加内容安全政策。
例如 font-src 使用数据：
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; font-src 'self' data:;">
如果您使用CDN，请根据需要添加，例如对于 fonts.gstatic.com ：
And if you use CDNs, add as needed, e.g. for fonts.gstatic.com:
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; font-src 'self' data: fonts.gstatic.com;">
这篇关于拒绝加载字体-Angular 2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
