无法使用授权标头执行post请求
当我发布带有授权头的请求API时，我在角4中有一个问题？
addPost(body): Observable<any>{
const url = 'https://xxxxxx';
return this.http.post(URL, body, this.options)
.map((res:Response) => {
this.data = res.json();
})
}
令牌来自firebase auth
afAuth.auth.currentUser.getIdToken()
.then(token => {
this.headers = new Headers({
'Authorization': 'Bearer '+token
});
this.headers.append('Content-Type', 'application/json');
this.options = new RequestOptions({ headers: this.headers });
});
this.headers.append('Content-Type', 'application/json');
this.options = new RequestOptions({ headers: this.headers });
我用这个叫邮局
return this.getJob.addPost(body).subscribe((data) => {
console.log(data);
});
回复403！！！
请求URL:https://us-central1-xxxxxx-prod.cloudfunctions.net/api/post请求方法：选项
状态代码：403
远程地址：216.58。198.51:443
引用方策略：降级时无引用
响应头
访问控制允许方法：获取、发布
访问控制允许来源：
缓存控制：私有
内容编码：gzip
内容长度：32
内容类型：文本/html；charset=utf-8
日期：2017年8月8日星期二12:23:55 GMT
etag:W/“c-dAuDFQrdjS3hezqxDTNgW7AOlYk”
函数执行id:d0la00v58w7p
服务器：谷歌前端
状态：403
变化：接受编码
x-cloud-trace-context:d1b6ff9d729f7e250193a70aea16cac1；o=1
x-cloud-trace-context:d1b6ff9d729f7e250193a70aea16cac1
x-powered-by:Express
请求头
：权限：us-central1-xxxxxx-prod.cloudfunctions。net
：方法：选项
：路径：/api/post
：方案：https
接受：/*
接受编码：gzip，deflate，br
接受语言：en-US，en；q=0.8，ar；q=0.6
访问控制请求标题：授权，内容类型
访问控制请求方法：POST
alexatoolbar-alx\u ns\u ph:alexatoolbar/alx-4.0。1
缓存控制：无缓存
来源：http://localhost:8080
pragma:无缓存
引用程序：http://localhost:8080/extras/addjobpost
用户代理：Mozilla/5.0（X11；Linux x86_64）AppleWebKit/537.36（KHTML，如Gecko）Chrome/59.0。3071.115狩猎/537.36
共有3个答案
我将标题替换为参数
getTokenHeader() {
return this.afAuth.auth.currentUser.getIdToken()
.then(token => {
let params = new URLSearchParams();
params.set('tsid', `Bearer ${token}`);
return params;
});
}
并在此函数中调用getTokenHeader
addPost(body): Observable<any>{//
// const url = 'https://us-central1-talentdraw-prod.cloudfunctions.net/api/post';
let url = this.api.URL['main']+this.api.URL['afterAuth'];
return new Observable(observer => {
this.getTokenHeader()
.then(tokenOptions => {
// console.log(tokenOptions);
return this.http.get(url, {
search: tokenOptions
})
.map((res:Response) => {
// this.data = res.json().data;
observer.next(res);
observer.complete();
})
.subscribe((data) => {
observer.complete();
})
})
.catch(( error: any ) => {
observer.error(error);
observer.complete();
});
})
}
请使用下面的代码。
let headers = new Headers();
headers.append('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
headers.append('Authorization', 'Bearer ' + 'token');
let order = 'order=foobar';
console.log("data");
return this.http.post(url, body, { headers: headers })
.map((res: any) => res.json());
更好的方法是创建一个拦截器来扩展默认的超文本传输协议模块
创建一个拦截器。ts
import {
Http,
Request,
RequestOptionsArgs,
Response,
RequestOptions,
ConnectionBackend,
Headers
}
from '@angular/http';
import { Router } from '@angular/router';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
@Injectable()
export class HttpInterceptor extends Http {
constructor(private backend: ConnectionBackend, private defaultOptions: RequestOptions, private router: Router) {
super(backend, defaultOptions);
}
request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> {
return this.intercept(super.request(url, this.getRequestOptionArgs(options)));
}
get(url: string, options?: RequestOptionsArgs): Observable<Response> {
return this.intercept(super.get(url, this.getRequestOptionArgs(options)));
}
post(url: string, body: any, options?: RequestOptionsArgs): Observable<Response> {
return this.intercept(super.post(url, body, this.getRequestOptionArgs(options)));
}
put(url: string, body: any, options?: RequestOptionsArgs): Observable<Response> {
return this.intercept(super.put(url, body, this.getRequestOptionArgs(options)));
}
delete(url: string, options?: RequestOptionsArgs): Observable<Response> {
return this.intercept(super.delete(url, this.getRequestOptionArgs(options)));
}
getRequestOptionArgs(options?: RequestOptionsArgs): RequestOptionsArgs {
if (options === null) {
options = new RequestOptions();
}
if (options === undefined) {
options = new RequestOptions();
}
let headers = new Headers();
let key = 'auth.jwt.token';
let item = localStorage.getItem(key) ? localStorage.getItem(key) : null;
let parsedToken = JSON.parse(item);
headers.append('Authorization', 'Bearer ' + parsedToken.token);
if(options.headers) {
headers.append('Content-Type', 'multipart/form-data');
headers.append('accept', 'application/json');
} else {
headers.append('Content-Type', 'application/json');
}
//Clearing the headers and appending the token + content type every request.
options.headers = new Headers();
options.headers = headers;
return options;
}
intercept(observable: Observable<Response>): Observable<Response> {
return observable.catch((err, source) => {
if (err.status === 401 && !err.endsWith(err.url, 'api/auth/login')) {
this.router.navigate(['/login']);
return Observable.empty();
} else {
return Observable.throw(err);
}
});
}
}
在你的应用程序中。单元ts：
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { APP_BASE_HREF } from '@angular/common';
import { XHRBackend, RequestOptions, Http, HttpModule } from '@angular/http';
import { Router } from '@angular/router';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { HttpInterceptor } from 'interceptor.ts';
export function httpInterceptorFactory(xhrBackend: XHRBackend, requestOptions: RequestOptions, router: Router) {
return new HttpInterceptor(xhrBackend, requestOptions, router);
}
@NgModule({
imports: [BrowserModule, AppRoutingModule, HttpModule, SharedModule.forRoot()],
declarations: [AppComponent],
providers: [{
provide: APP_BASE_HREF,
useValue: '<%= APP_BASE %>'
}, SomeService, AnotherService,
{
provide: Http,
useFactory: httpInterceptorFactory,
deps: [XHRBackend, RequestOptions, Router]
}],
bootstrap: [AppComponent]
})
export class AppModule { }
然后像往常一样调用超文本传输协议，例如this。_http.get（）. map（），拦截器将为您追加令牌。
编辑：
更新答案，包括基本应用程序。单元ts
-
我正在尝试从这个 API 调用中创建“UUID”，我正在使用 axios 和 vue.js。这是我的源代码。 但不幸的是，我得到了 在'访问XMLHttpRequesthttps://www.uuidtools.com/api/generate/v1'从原点'http://localhost:8080'已被CORS策略阻止：对飞行前请求的响应未通过访问控制检查：请求的资源上不存在“access c
-
我正在努力构建两个asp.netmvc web应用程序之间的安全集成；和调用网络扫描应用程序的ERP系统。所以目前在接收器应用程序（网络扫描应用程序）上我有以下操作方法，应该只由ERP系统执行：- 而在调用者系统（ERP系统）上，我有以下调用上述动作方法的动作方法。 如上面代码所示，我正在发送一个安全令牌，它存储在两个应用程序的web中。配置文件。通过这种方式，我可以确保（或者这是我的意图）网络扫
-
问题内容： 我有一个react / redux应用程序，可从api服务器获取令牌。用户验证后，我想使所有axios请求都将该令牌作为Authorization标头，而不必手动将其附加到操作中的每个请求。我对React / Redux相当陌生，并且不确定采用最佳方法，也没有在Google上找到任何高质量的点击。 这是我的redux设置： 我的令牌存储在的redux存储中。 我对如何进行有点迷茫。我试
-
HTTP规范说； HTTP访问身份验证在“HTTP身份验证：基本和摘要访问身份验证”[43]中进行了描述。如果请求经过身份验证并指定了一个领域，则相同的凭据应该对该领域内的所有其他请求有效（假设身份验证方案本身不需要其他凭据，例如根据质询值变化的凭据或使用同步时钟）。 我真的不明白这意味着什么，但这是我的情况，这里有反对 HTTP 规范的东西吗？我使用 Java Rest 服务 客户端使用HTTP
-
我正在尝试使用Sprint安全框架在Spring Boot中为我的HTTP请求设置授权。我是Spring Security的新手，我找不到任何关于我的情况的文档。 我知道我们必须重写WebSecurity配置适配器方法-configure（AuthenticationManagerBuilder） 这是我试图建立的流程。我的前端和后端托管在不同的域中，所以我也在寻找跨来源的授权。通过发布到REST
-
嘿，我想弄清楚如何为REST API POST调用使用OAuth授权令牌。 文件规定： 如果发生此错误，您的应用程序可以通过重新运行相应的流来请求新的访问令牌。 目前我的VB. net代码是这样的： 我不断收到一个错误：远程服务器返回一个错误：（401）未经授权。 我在下面的帖子中发现了这一点： Yammer API要求OAuth数据位于标头中。如果您查看他们获取数据的示例，您将看到请求如下所示。