-
Sep 27th, 2021, 07:39 PM
#1
[RESOLVED] [Angular 12] CSP Error on POST
I have the following service:
Code:
import { Inject, Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpResponseBase } from '@angular/common/http';
import { Observable } from 'rxjs';
import { IEnvironment } from '../environment';
import { IAuthorizationResponse } from './authentication.interface';
@Injectable({
providedIn: 'root'
})
export class AuthorizationService {
private httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/x-www-form-urlencoded',
'Access-Control-Allow-Origin': '*'
})
};
constructor(@Inject('env') private environment: IEnvironment,
private http: HttpClient) { }
/**
* Retrieve a JWT bearer token that may be used to authorize future requests. Note that the user credentials may EITHER be passed in as form values or as a basic authorization header.
* @param username client's username
* @param password client's password
* @returns Observable<IAuthorizationResponse>
*/
login(username: string, password: string): Observable<IAuthorizationResponse> {
return this.http.post<IAuthorizationResponse>(this.environment.authorizationUrl, {
client_id: this.environment.authorizationClientId,
username,
password
}, this.httpOptions);
}
/**
* Revoke a refresh token so that it will no longer be valid for use
* @param authorizationResponse client's IAuthorizationResponse that contains the refresh_token
* @returns Observable<HttpResponseBase>
*/
logout(authorizationResponse: IAuthorizationResponse): Observable<HttpResponseBase> {
return this.http.post<HttpResponseBase>(`${this.environment.authorizationUrl}/revoken`, {
client_id: this.environment.authorizationClientId,
refresh_token: authorizationResponse.refresh_token
}, this.httpOptions);
}
/**
* Retrieve a JWT bearer token that may be used to authorize future requests. Note that the user credentials may EITHER be passed in as form values or as a basic authorization header.
* @param username client's username
* @param password client's password
* @returns Observable<IAuthorizationResponse>
*/
refreshToken(authorizationResponse: IAuthorizationResponse): Observable<IAuthorizationResponse> {
return this.http.post<IAuthorizationResponse>(`${this.environment.authorizationUrl}/refresh`, {
client_id: this.environment.authorizationClientId,
refresh_token: authorizationResponse.refresh_token
}, this.httpOptions);
}
}
And I am calling the login method like this:
Code:
login(): void {
if (this.form.invalid) {
this.form.markAllAsTouched();
return;
}
const { username, password } = this.form.value;
this.authorizationService.login(username, password).subscribe(results => {
console.log(results);
});
}
But the request is returning the following status in Chrome's developer tool's network tab: (blocked:csp)
I thought that by setting the Access-Control-Allow-Origin to the wildcard would allow the request to go through, but apparently it's not. I would like to restrict it to the domain that I'm requesting the API from, but for now I'm trying to allow for all.
What am I missing?
-
Oct 7th, 2021, 08:59 AM
#2
Re: [Angular 12] CSP Error on POST
The issue was on the client's server. They were very restrictive in their cross-origin policy and as a workaround I'm using the cordova community HTTP plugin to send requests outside of the browser.
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|