在 angular2 上设置 http header
Set http header on angular2
在我的应用程序中,我有一个基于 webService 的构建列表,我想用 http
和 Angular2 来获取它们。
我为此创建了一项服务,这是我为此编写的代码:
我的 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
没有设置在 header 的请求中!结果是控制台出现 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
回复header:
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 时它工作正常。
为什么不起作用?我该如何解决?
谢谢。
假设您通过本教程配置代理https://github.com/angular/angular-cli#proxy-to-backend
尝试在您的后端网络服务中启用 CORS
Access-Control-Allow-Methods: GET, POST, OPTIONS
在 ASP.net 应用程序中启用 OPTIONS
方法
在我的应用程序中,我有一个基于 webService 的构建列表,我想用 http
和 Angular2 来获取它们。
我为此创建了一项服务,这是我为此编写的代码:
我的 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
没有设置在 header 的请求中!结果是控制台出现 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
回复header:
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 时它工作正常。
为什么不起作用?我该如何解决?
谢谢。
假设您通过本教程配置代理https://github.com/angular/angular-cli#proxy-to-backend
尝试在您的后端网络服务中启用 CORS
Access-Control-Allow-Methods: GET, POST, OPTIONS
在 ASP.net 应用程序中启用 OPTIONS
方法