Question

我正在尝试请求HTTP GET调用我的本地REST REST http://demosite.com/mage_auth/api/rest它需要一个授权令牌让用户调用端点。

因此，在我的请求中，我传递了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服务器上运行，所以我在httpd.conf

中添加了一些CORS值

<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>

我仍然遇到此错误。

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。但似乎并非如此，我不明白为什么它仍然会发出预检错误。

有人可以指出这个请求有什么问题吗？

Answer 1

这可能是CORS过滤器服务器端的配置错误。至于我，即使我的CORS过滤器配置良好的服务器端，我仍然面临同样的问题。我使用Angular的docker node ls -f name=manager作为标题。这就是我在角度服务中推动它的方式

Angular 2

RequestOptions

Angular 4.3

定义拦截器

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);

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

头请求CORS / Preflight问题中的Angular2身份验证令牌

1 个答案: