头请求CORS / Preflight问题中的Angular2身份验证令牌-Java 学习之路

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

所以在我的请求中，我传递了 headers.set('Authorization', token) 和内容类型JSON，但是当我检查网络响应时它没有't seems to be passing the header in the Request' s Header .

我创建了一个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 . 但似乎并不知道为什么它仍然会发出预检错误 .

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

1 回答

这可能是CORS过滤器服务器端的错误配置 . 至于我，即使我的CORS过滤器配置良好的服务器端，我仍然面临同样的问题 . 我使用了Angular的 RequestOptions 作为 Headers . 这就是我在角度服务中的表现

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

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

回复于 2024-04-30T03:26:29+08:00

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

1 回答

相关问题