头部请求中的Angular2身份验证令牌CORS /预检问题
问题描述:
我试图请求拨打本地REST REST的HTTP GET
http://demosite.com/mage_auth/api/rest
它需要授权令牌让用户呼叫端点。头部请求中的Angular2身份验证令牌CORS /预检问题
因此,在我的请求中,我通过了headers.set('Authorization', token)
和内容类型JSON,但是当我检查网络响应时,似乎并没有在请求标头中传递标头。
我创建了一个HttpClient的服务要通过身份验证令牌: -
createAuthorizationHeader(headers: Headers) {
var sample3Results = (new OAuthSimple()).sign({
path: 'http://www.demosites.com/mage_auth/',
signatures: {
'consumer_key': key,
'shared_secret': secret,
'access_token': token,
'access_secret': tokensecret
}
});
try {
console.debug('Sample 3', sample3Results);
} catch (e) { };
let headerAuth = sample3Results.header;
headers.set('Authorization', headerAuth);
headers.set('Content-Type', 'application/json; charset=UTF-8');
}
get(url) {
let headers = new Headers();
this.createAuthorizationHeader(headers);
return this.http.get(url, {
headers: headers
});
}
我的组件请求是这样的: -
this.httClient.get('http://www.demosites.com/mage_auth/api/rest/products')
.map(res => res.json())
.subscribe(data => {
console.log('data: ', data);
})
的REST API是WAMP的服务器上运行,所以我也加入了一些CORS值httpd.conf
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Headers "origin, content-type"
Header set Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"
</IfModule>
,我仍然getti这个错误。
XMLHttpRequest cannot load http://www.demosites.com/mage_auth/api/rest/products. Response for preflight has invalid HTTP status code 400
以防万一,我还添加了从Angular-cli
一个proxy.config.json如认为会解决这个问题,因为该请求是从localhost:4200
到来。但似乎并非如此,我不知道为什么它仍然会出现预检错误。
有人可以指出这个请求有什么问题吗?
答
这可能是CORS过滤器服务器端的配置错误。 至于我,即使我的CORS过滤器配置良好的服务器端,我仍然面临同样的问题。我使用了Angular的RequestOptions
作为标题。这是我soved它在我的角度服务
角2
header.append("Content-Type", "application/json");
header.append("X-Auth-Token", token);
let options = new RequestOptions({headers: header})
return this.http.get(url, options)
.toPromise()
.then(response => response.json())
.catch(this.handleError);
角4.3
- 内定义拦截
import {Injectable} from '@angular/core';
import {HttpRequest, HttpHandler, HttpEvent, HttpInterceptor} from '@angular/common/http';
import {Observable} from 'rxjs/Observable';
import {AppService} from '../app.service';
@Injectable()
export class Interceptor implements HttpInterceptor {
constructor() {}
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
request = request.clone({
setHeaders: {
token: `Bearer token`
}
});
return next.handle(request);
}
}
HttpRequests
是不可变的对象。所以我们需要复制它们,然后修改副本。
- 导入拦截器在
app.module.ts
...
imports: [
BrowserModule,
HttpClientModule,
...
],
providers: [
{provide: HTTP_INTERCEPTORS, useClass: Interceptor, multi: true},
AppService
...
]
- 使用拦截器在
app.service.ts
import { Injectable } from '@angular/core';
import {Http, RequestOptions} from '@angular/http';
import 'rxjs/add/operator/map';
import {Observable} from 'rxjs/Observable';
import {HttpClient} from '@angular/common/http';
@Injectable()
export class AppService {
constructor(public http: HttpClient) { }
connectServer() {
return this.http.get('url')
.map(response => response);
}
}
你解决这个问题?如果是这样,你能分享你的解决方案吗?因为我面临同样的问题。 – edkeveked