首页 文章

为angular 2 http请求设置基本URL

提问于
浏览 次
42

我正在尝试为我的所有角度2 http请求设置基本网址 . 以下是我的申请的基本设置 .

class HttpOptions extends BaseRequestOptions {
  url:string = "http://10.7.18.21:8080/api/";
}


bootstrap(AppComponent, [
  HTTP_PROVIDERS,
  provide(RequestOptions, {useClass: HttpOptions})
]);


export class AppComponent {
  users:Array<User>
  constructor(private http: Http) {
    http.get("/users")
      .subscribe(res => this.users = res.json());
  }
}

请求不会按照我的配置发送到http://10.7.18.21:8080/api/users . 而是将请求发送到http://localhost:8000/users .

How do I set base url for http request in angular 2 application?

我正在使用 Angular 2.0.0-beta.0 .

angular angular2-http

9 回答

  • 0

    For angular 4.3+ and @angular/common/http

    拦截器很简单

    @Injectable()
export class ExampleInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const url = 'http://myurl.com';
    req = req.clone({
      url: url + req.url
    });
    return next.handle(req);
  }
}

    app.module.ts

    import { NgModule } from '@angular/core';
import { Injectable } from '@angular/core';
import { HttpClientModule, HttpRequest, HTTP_INTERCEPTORS } from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent,
    ...
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    ...
  ],
  providers: [
    AppComponent,
    { provide: HTTP_INTERCEPTORS, useClass: ExampleInterceptor, multi: true }
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

    编辑：HttpClient和HttpInterceptor在Angular 4.3中引入

    回复于
  • 44

    更新：请参阅Angular 4的@vegazz答案 .

    对于Angular 2.2.1，以下内容应为web api base url的前缀，并表示较小的占用空间：

    import {Request, XHRBackend, XHRConnection} from '@angular/http';

@Injectable()
export class ApiXHRBackend extends XHRBackend {
    createConnection(request: Request): XHRConnection {
        if (request.url.startsWith('/')){
            request.url = 'http://localhost:3000' + request.url;     // prefix base url
        }
        return super.createConnection(request);
    }
}

    在app.module.ts中注入提供者：

    providers: [
    { provide: XHRBackend, useClass: ApiXHRBackend }
  ]

    用法示例：

    this._http.post('/api/my-route', {foo: 'bar'})
            .map<MyResponse>(res => res.json())

    它似乎涵盖了所有方法（GET，PUT，POST，......）

    回复于
  • 0

    适用于Angular2版本2.2（2016年12月）

    来自RC5的Angular标记 HTTP_PROVIDERS 已被弃用并试图将事情转移到 @NgModule ，上述解决方案并不真正适用，因此作为其文档 . 我交叉了几个其他的答案，找到了实现基本网址的方法，希望这对其他人有帮助 .

    基本的想法是，我们将事情转移到 AppModule ，而不是在引导程序中执行操作 .

    app.module.ts

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


import { CustomRequestOptions } from './customrequest.options';

@NgModule({
  declarations: [
    AppComponent,
    ...
  ],
  imports: [
    BrowserModule,
    HttpModule,
    ...
  ],
  providers: [
    { provide: RequestOptions, useClass: CustomRequestOptions }
  ],
  bootstrap: [ AppComponent ]
})

    并将CustomRequestOptions移动到单独的可注入服务中

    import { Injectable } from '@angular/core';
import { BaseRequestOptions, RequestOptions, RequestOptionsArgs } from '@angular/http';

@Injectable()
export class CustomRequestOptions extends BaseRequestOptions {
  merge(options?:RequestOptionsArgs):RequestOptions {
    options.url = 'http://localhost:9080' + options.url;
    return super.merge(options);
  }
}

    编辑GET以外的请求方法 .

    如果您尝试发送GET以外的请求类型，则前一种方法无法将baseurl注入请求中 . 这是因为Angular2生成新的 RequestOptions 而不是 this._defaultOptions ，其合并方法没有被我们的CustomRequestOptions覆盖 . （见这里的source code） .

    因此，我没有在CustomRequestOptions合并方法的最后一步返回 super.merge(...) ，而是生成了 CustomRequestOptions 的新实例，以确保以下操作仍然有效 .

    import { Injectable } from '@angular/core';
import { RequestOptions, RequestOptionsArgs } from '@angular/http';

@Injectable()
export class CustomRequestOptions extends RequestOptions {
  merge(options?: RequestOptionsArgs): RequestOptions {
    if (options !== null && options.url !== null) {
      options.url = 'http://localhost:9080' + options.url;
    }
    let requestOptions = super.merge(options)
    return new CustomRequestOptions({
      method: requestOptions.method,
      url: requestOptions.url,
      search: requestOptions.search,
      headers: requestOptions.headers,
      body: requestOptions.body,
      withCredentials: requestOptions.withCredentials,
      responseType: requestOptions.responseType
    });
  }
}

    这适用于POST，PUT，DELETE方法 . 希望这是有帮助的 .

    回复于
  • 17

    在 Angular 2.0.0-beta.6 您可以通过覆盖'merge'来实现此目的

    import {BaseRequestOptions, RequestOptions, RequestOptionsArgs} from 'angular2/http';

export class ApRequestOptions extends BaseRequestOptions {

  merge(options?:RequestOptionsArgs):RequestOptions {
    options.url = 'http://10.7.18.21:8080/api' + options.url;
    return super.merge(options);
  }

}
    回复于
  • 11

    看了 BaseRequestOptions ， RequestOptions 和 Http 类的代码源后：

    似乎 url 属性对应于默认URL，但不是URL的前缀 .

    为了实现你的用例，我建议在http对象前放一个服务然后注入服务 . 像这样的东西：

    import {Injectable} from '@angular/core';
import {Http} from '@angular/http';

@Injectable()
export class HttpClient {
  http: Http;
  urlPrefix: string;

  constructor(http: Http) {
    this.http = http;
    this.urlPrefix = 'http://...';
  }

  get(url) {
    return this.http.get(this.urlPrefix + url);
  }

  post(url, data) {
    return this.http.post(this.urlPrefix + url, data);
  }
}

    和

    import {HttpClient} from './http-client';

export classMyComponent {
  constructor(httpClient: HttpClient) {
    this.httpClient = httpClient;
  }

  handleSomething() {
    this.httpClient.post(url, data)
    ).subscribe(...);
  }
}

    也就是说，这可能是Angular2本身的贡献;-)

    希望它对你有帮助，蒂埃里

    回复于
  • 6

    不同的方法：在开发中在localhost中运行应用程序时，请考虑配置代理 .

    proxy.conf.json

    {
   "/api/**": {
      "target": "http://10.7.18.21:8080/",
      "secure": false,
      "logLevel": "debug"
   }
}

    更多：link

    回复于
  • 5
    import {LocationStrategy} from 'angular2/router';

constructor(private locationStrategy:LocationStrategy) {
  console.log(locationStrategy.prepareExternalUrl('xxx'));
}

    另见https://github.com/angular/angular/blob/1bec4f6c6135d7aaccec7492d70c36e1ceeaeefa/modules/angular2/test/router/path_location_strategy_spec.ts#L88

    回复于
  • 3

    对于当前用户，这里是 angular 2.4.8 的真实工作示例

    here是分割和链接 BaseCommonRequestOptions 和 CommonRequestOptions 的原因的代码 .

    import { BaseRequestOptions, Headers, RequestOptions, RequestOptionsArgs } from '@angular/http';
import { Injectable } from '@angular/core';

@Injectable()
export class BaseCommonRequestOptions extends BaseRequestOptions {

  merge(options?: RequestOptionsArgs): RequestOptions {
    return new CommonRequestOptions(super.merge(extracted(options)));
  }
}

/**
 * for inner merge when using post put patch delete...others method
 */
export class CommonRequestOptions extends RequestOptions {
  merge(options?: RequestOptionsArgs): RequestOptions {
    return new RequestOptions(super.merge(extracted(options)));
  }
}

/**
 * inject default values
 *
 * @param options
 * @returns {RequestOptionsArgs}
 */
export function extracted(options: RequestOptionsArgs) {
  console.log(options);
  if (!validUrl(options.url)) {
    options.url = 'http://localhost:3000' + (options.url ? options.url : "");
  }
  // use default header application/json, if content-type header was empty.
  if (options.headers != null) {
    let contentType = options.headers.get('content-type');
    if (contentType == null || contentType == '') {
      options.headers.append('content-type', 'application/json');
    }
  } else {
    options.headers = new Headers({ 'content-type': 'application/json' });
  }

  return options;
}

/**
 * validate url
 *
 * @param url
 * @returns {boolean}
 */
export function validUrl(url: string) {
  return /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/.test(url);
}
    回复于
  • 1

    创建一个.ts文件

    import { Injectable } from '@angular/core';
import {Request, XHRBackend, XHRConnection} from '@angular/http';


    @Injectable()
    export class ApiXHRBackend extends XHRBackend {
    createConnection(request: Request): XHRConnection {
    if (request.url.startsWith('/api')){
    var url=request.url.replace("/api", "");
    request.url = 'http://localhost:8080' + url; // prefix base url
    }
    return super.createConnection(request);
    }

}

    然后在app.module.ts中

    import { ApiXHRBackend } from './guard/httpintercepter';
import {Request, XHRBackend, XHRConnection} from '@angular/http';

    添加提供商部分

    providers: [
{provide: XHRBackend, useClass: ApiXHRBackend }
],

    然后在你的service.ts http调用必须如下例所示

    return this._http.post("/api/customerservice/loginvalidation",data)
.map((response: Response) => {
return response;
});

    / api将替换为您的基本网址http://localhost:8080

    更多细节http://shabeen.in/webschool/how-to-set-angular-2-service-http-base-url/

    回复于

相关问题