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

我试图请求拨打本地REST REST的HTTP GEThttp://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到来。但似乎并非如此，我不知道为什么它仍然会出现预检错误。

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

来源

2017-05-30 MrNew

你解决这个问题？如果是这样，你能分享你的解决方案吗？因为我面临同样的问题。 – edkeveked

这可能是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); 
    } 
}

来源

2017-06-23 07:40:03 edkeveked

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

回答

相关问题