EDIT 2: I forgot to return when I updated the code...facepalm
EDIT:
(After changing post call to:
this._http.post<userArray>(this.apiUrl,users$, httpOptions);
Now it's giving me this in Console log..any fix? thanks: https://ibb.co/6PLK71j )
I'm using postman for my rest API.
Authorization Token is not being sent for POST call but same Authorization Token and HTTP header is working fine for DELETE call.
My API: http://dradiobeats.x10host.com/api/areas
(collection for Postman: https://www.getpostman.com/collections/deb24ed6036451580238 )
Authorization Token: Postman Authorization: Bearer Token.
Console Log:
No Authorization Header is passed
userService.ts :
import { Injectable, Input } from "@angular/core"; import { HttpClient, HttpHeaders } from "@angular/common/http"; import { userArray } from "./users.model"; import { Observable } from "rxjs"; const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json' , 'Authorization': 'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImp0aSI6ImYyOTc3OTBmODc3ODlhYzg3MGE2ZmU3YTY0YzY2YmIwOGU4M2Q0ZmQzY2IyNmNiNWU3NDEzMTFmZjExMDk4NTA5NWUzN2IxN2I5YmI2YmFjIn0.eyJhdWQiOiIyIiwianRpIjoiZjI5Nzc5MGY4Nzc4OWFjODcwYTZmZTdhNjRjNjZiYjA4ZTgzZDRmZDNjYjI2Y2I1ZTc0MTMxMWZmMTEwOTg1MDk1ZTM3YjE3YjliYjZiYWMiLCJpYXQiOjE1NzU4NzM4MzksIm5iZiI6MTU3NTg3MzgzOSwiZXhwIjoxNjA3NDk2MjM5LCJzdWIiOiIyIiwic2NvcGVzIjpbXX0.J3nMXcPpqlRVvIRkrVAMblSUwdlXFmrkn9SPD2WE1DwdiqAMdhay8zAeD550ta9qWiNxHOKMAWF8t3H9cIgItaB9ZX2CxoxzS5P1nJFzit8qxiB-gzJL3mpybrnLtrKGjxsM5i_lBvdJsnhWzi15jKWIu-RNxUYPnXCjuxnXYEiyoJg17hsYUh4910VfFWx4R3WvH7WOvczF53IDKyX5fSTt4WSJUqciuNepkO6Klc8sj_yPmDPQltUjUXSSplkOQ8sL5uHk7PmzSjIfoR8RC0A-YQqI9mbZMTyJ0IyKoAHvRHF8q1cW5qfUmLXTgxcCTmFPqXqIlcAoOoJMCxke5fl0PuK0rgU7dxouATk_3B6cio7-7Zgps0iopDpk2nm-o40mjSiOUGb2kyKckYN09orYuan5wEd1KJ873ejKEgBWOhJu4gQFps8M9VoDXncAqMxeBqbUY1UZENx_n6uduQ_SAY4rgIUFCixfNc5Y_-HLDa108u4-z3APGbdxrhEdZXyHz9xQTaLrWcU_iCJ5g_ObT5VGZHtawZbfOYm2ZZpjPiCZpXunhrsbAcHBX64akWcehmT2gUJqPsxvaObKN3nayML1NHtdZGgAHUE89clhIH610Fod0C_jMTqpU7IkY9aSU781HsQVlHNw3qGbTinWfYPDBG0Lkp9NnmRe9BU' , 'Accept' : 'application/json' }) }; @Injectable({ providedIn: "root" }) export class UsersService { users$: userArray[]; apiUrl = "http://dradiobeats.x10host.com/api/areas"; delUrl = "http://dradiobeats.x10host.com/api/areas"; constructor(private _http: HttpClient) {} getUsers() { return this._http.get<userArray[]>(this.apiUrl); } deleteUser(id: userArray): Observable<userArray> { const url = `${this.apiUrl}/${id}`; console.log(); return this._http.delete<userArray>(url, httpOptions); } onSubmit(users$: userArray[]): Observable<userArray> { console.log(users$); return this._http.post<userArray>(this.apiUrl, httpOptions); } }
Add-Post.ts :
import { Component, OnInit } from "@angular/core"; import { UsersService } from "src/app/users.service"; @Component({ selector: "app-add-posts", templateUrl: "./add-posts.component.html", styleUrls: ["./add-posts.component.css"] }) export class AddPostsComponent implements OnInit { name: string; description: string; domain: string; picture: string; id: number = 29; constructor(private userService: UsersService) {} ngOnInit() {} onSubmit() { const users$ = { name: this.name, description: this.description, domain: this.domain, picture: this.picture }; this.userService.onSubmit(users$).subscribe(); } }
Can someone help me with this? Thanks. c:
Use this._http.post<userArray>(this.apiUrl, data , httpOptions);
Second parameter is the data you needs to pass
Use a angular interceptor to add the token to every request.
import { Injectable } from '@angular/core';
import {
HttpEvent,
HttpInterceptor,
HttpHandler,
HttpRequest,
HttpResponse
} from '@angular/common/http'
import { Observable } from 'rxjs';
import { tap } from 'rxjs/operators';
@Injectable()
export class ApiHeaderInterceptor implements HttpInterceptor {
constructor() { }
// intercept request and add token
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
const bearer = 'Bearer eyJ0eXAiOiJKV1QiLCJh.....'; // this.anyService.getToken();
if (bearer) {
request = request.clone({
setHeaders: {
'Authorization': bearer,
}
});
}
return next.handle(request)
.pipe(
tap(event => {
if (event instanceof HttpResponse) {
}
}, error => {
// Hadle Errors
})
);
};
}
Add it to your app.module providers like so
providers: [
{ provide: HTTP_INTERCEPTORS, useClass: ApiHeaderInterceptor, multi: true },
],
I think your post request should be like
this._http.post<userArray>(this.apiUrl,users$, httpOptions);
You are passing httpOptions
as a second parameter but it should be the third parameter for post request. Second parameter should be the body.
like this
post(url: string, body: any, options:....
Refer their DOC for more details
Also in component you are calling onSubmit
method of service by passing a single user but service expecting array of users. So you have to change the service onSubmit
method signature like bellow. So I it will expecting a single user too.
onSubmit(users$: userArray)
您的请求正文在 onSubmit() 后调用中丢失。
this._http.post(<url>, <request body>, <headers>);
Try this: this._http.post<userArray>(this.apiUrl, requestData , httpOptions);
Second parameter in the post is a request object without object you can't send post request
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.