加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

angular – 通过服务器上的Http请求的URL必须是绝对的.网址:./

发布时间:2020-12-17 07:16:00 所属栏目:安全 来源:网络整理
导读:我是Angular 2的新手,我在ngx-translate组件中遇到以下问题(通过服务器上的Http请求的URL必须是绝对的.URL:./ assets / i18n / en.json).我确信这个en.json文件存在,因为我向它发出http请求并且请求成功 这是我的app.module.server.ts文件: import { NgMod
我是Angular 2的新手,我在ngx-translate组件中遇到以下问题(通过服务器上的Http请求的URL必须是绝对的.URL:./ assets / i18n / en.json).我确信这个en.json文件存在,因为我向它发出http请求并且请求成功

这是我的app.module.server.ts文件:

import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { sharedConfig } from './app.module.shared';
import { HttpModule,Http } from '@angular/http';
import {
    TranslateModule,TranslateLoader,MissingTranslationHandler,MissingTranslationHandlerParams
} from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

export function createTranslateLoader(http: Http) {
    return new TranslateHttpLoader(http,'./assets/i18n/','.json');
}

export class MyMissingTranslationHandler implements MissingTranslationHandler {
    handle(params: MissingTranslationHandlerParams) {
        return '[' + params.key + ']';
    }
}

@NgModule({
    bootstrap: sharedConfig.bootstrap,declarations: sharedConfig.declarations,imports: [
        ServerModule,HttpModule,TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,useFactory: (createTranslateLoader),deps: [Http]
            }
        }),...sharedConfig.imports
    ]
})
export class AppModule {
}

这是我的app.module.cleint.ts文件:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule,Http } from '@angular/http';
import { sharedConfig } from './app.module.shared';
import {
    TranslateModule,MissingTranslationHandlerParams
} from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
export function createTranslateLoader(http: Http) {
    return new TranslateHttpLoader(http,imports: [
        BrowserModule,FormsModule,...sharedConfig.imports
    ],providers: [
        { provide: 'ORIGIN_URL',useValue: location.origin },{
            provide: MissingTranslationHandler,useClass: MyMissingTranslationHandler
        }
    ]
})
export class AppModule {
}

这是我的app.module.shared.ts文件:

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { HttpModule,Http } from "@angular/http";
import { BrowserModule } from "@angular/platform-browser";

import { TranslateModule} from '@ngx-translate/core';

import { AppComponent } from './components/app/app.component'
import { NavMenuComponent } from './components/navmenu/navmenu.component';
import { HomeComponent } from './components/home/home.component';
import { FetchDataComponent } from './components/fetchdata/fetchdata.component';
import { EmployeesListComponent } from './components/employees/EmployeesList.component';
import { CounterComponent } from './components/counter/counter.component';

export const sharedConfig: NgModule = {
    bootstrap: [AppComponent],declarations: [
        AppComponent,NavMenuComponent,CounterComponent,FetchDataComponent,EmployeesListComponent,HomeComponent
    ],imports: [
        RouterModule.forRoot([
            { path: '',redirectTo: 'home',pathMatch: 'full' },{ path: 'home',component: HomeComponent },{ path: 'counter',component: CounterComponent },{ path: 'fetch-data',component: FetchDataComponent },{ path: 'employees-list',component: EmployeesListComponent },{ path: '**',redirectTo: 'home' }
        ]),BrowserModule,TranslateModule
    ],exports: [
        TranslateModule
    ]
};

解决方法

那问题就是这个问题. ./assets/i18n/en.json不是一个绝对的URL: http://foo.com/assets/i18n/en.json.我知道通常有一些方法可以指示您从与客户端代码相同的服务器提供服务.可能不是

export function createTranslateLoader(http: Http) {
    return new TranslateHttpLoader(http,'/assets/i18n/','.json');
}

但是,当我在角度docs repos中四处寻找时:我看到了这个:https://github.com/angular/angular/issues/15349.因此,有角度的http服务可能不支持调用文档所在的主机.这有点令人惊讶,但你可以在javascript中使用:

window.location.origin

因此,只需在设置呼叫时将其添加到/ assets / i18n /.

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读