【问题标题】:Set http header on angular2在angular2上设置http标头
【发布时间】:2017-02-02 08:52:08
【问题描述】:

在我的应用程序中,我有一个在 webService 上构建的列表,并希望通过 Angular2 使用 http 获取它们。 我为此创建了一个服务,这是我为它编写的代码:

我的 http 服务:

import { Injectable, Inject } from '@angular/core';
import { RequestOptionsArgs, Http, Response, RequestOptions, Request, RequestMethod, Headers } from '@angular/http';
import 'rxjs/add/operator/map';
import { StaticValuesService } from './static-values.service';
import { Building } from '../model/building';

@Injectable()
export class BuildingService {

  constructor(private _http: Http, private _values: StaticValuesService) {}

  getAllBuildings() {

    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });

    return this._http.get(this._values.MainApi + 'api/getbuildings/', options)
      .map((response: Response) => response.json());

  }

}

我使用此代码订阅了一个组件:

constructor(private _buildingServices: BuildingService) { }

  ngOnInit() {
    this._buildingServices.getAllBuildings().subscribe(res => {
      console.log(res);
    }, error => {
        console.log(error);
    });
  }

在我运行 Angular 服务器后,看起来 contnet-type 没有在请求的标头中设置!结果是控制台出现 404 错误!

请求网络 chrome 中的内容

OPTIONS /api/getbuildings/ HTTP/1.1
Host: nommix-api.azurewebsites.net
Connection: keep-alive
Access-Control-Request-Method: GET
Origin: http://localhost:4200
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.95 Safari/537.36
Access-Control-Request-Headers: authorization, content-type
Accept: */*
Referer: http://localhost:4200/dashboard/master
Accept-Encoding: gzip, deflate, sdch, br
Accept-Language: en,en-US;q=0.8,fa;q=0.6
AlexaToolbar-ALX_NS_PH: AlexaToolbar/alx-4.0

响应标头:

HTTP/1.1 404 Not Found
Cache-Control: no-cache
Pragma: no-cache
Content-Length: 134
Content-Type: application/json; charset=utf-8
Expires: -1
Server: Microsoft-IIS/8.0
X-AspNet-Version: 4.0.30319
X-Powered-By: ASP.NET
Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: Content-Type
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
Set-Cookie: ARRAffinity=12a1bb0d03776b567fa3d04e126a9fa5ad153cba2c87fbc48fc25d775bebd44a;Path=/;Domain=nommix-api.azurewebsites.net
Date: Thu, 02 Feb 2017 11:51:25 GMT

当我使用 Postman 测试 API 时,它工作正常。

为什么它不起作用?我该如何解决?

谢谢。

【问题讨论】:

    标签: angular angular2-services


    【解决方案1】:

    假设您通过本教程配置代理 https://github.com/angular/angular-cli#proxy-to-backend

    尝试在您的后端网络服务中启用 CORS

    Access-Control-Allow-Methods: GET, POST, OPTIONS
    

    在 ASP.net 应用程序中启用 OPTIONS 方法 https://stackoverflow.com/a/21458845/3676586

    【讨论】:

    • 我已经设置了代理并且access-control也被启用了。但仍然无法正常工作。当我使用邮递员之类的工具时,一切正常!
    • 您是否保护了这条路线,例如要访问此网址,您必须进行身份验证,如我所见,您的代码headers.append('Authorization', 'Bearer '); 没有令牌。顺便说一句,邮递员不关心 CORS,请确保您允许 get/post/options 方法。
    • 我添加Authorization 只是为了测试目的。在我的端点(api/getbuildings/)中,我们有一个建筑物的列表,就是这样。没有身份验证或其他任何东西。而且没有headers.apped('Auth....)' 我仍然有同样的错误。
    • ok,我们试试别的方案,不要使用代理,因为你开启了CORS,所以直接使用api端点到nommix-api.azurewebsites.net
    • 请阅读此主题,您似乎没有启用选项方法,stackoverflow.com/a/21458845/3676586
    猜你喜欢
    • 1970-01-01
    • 2017-10-03
    • 2016-10-15
    • 1970-01-01
    • 2016-04-30
    • 1970-01-01
    • 2017-08-29
    • 2016-05-04
    • 1970-01-01
    相关资源
    最近更新 更多