Getting 401 Unauthorized - CORS origin error while posting using HttpClient in Angular5

Question

Getting the below error while attempting to post data into my backend firebase DB.

Please find the code snippets below:

storeUsers(users: any[]){
        return this.http.post('https://promise-90488.firebaseio.com/data.json', users);
    }

appcomponent.ts:

const result = Object.assign({}, this.userForm.value );
console.log(result);
this.userService.storeUsers(result)
      .subscribe(
        (response) => console.log(response),
        (error) => console.log(error)
      );

And the error messages are below:

POST https://promise-90488.firebaseio.com/data.json 401 (Unauthorized) app.component.ts:37 HttpErrorResponse {headers: HttpHeaders, status: 401, statusText: "Unauthorized", url: "https://promise-90488.firebaseio.com/data.json", ok: false, …} error: {error: "Permission denied"} headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ} message: "Http failure response for https://promise-90488.firebaseio.com/data.json: 401 Unauthorized" name: "HttpErrorResponse" ok: false status: 401 statusText: "Unauthorized" url: "https://promise-90488.firebaseio.com/data.json" proto: HttpResponseBase

Possible duplicate of [XMLHttpRequest cannot load XXX No 'Access-Control-Allow-Origin' header](https://stackoverflow.com/questions/35553500/xmlhttprequest-cannot-load-xxx-no-access-control-allow-origin-header) — Quentin, Dec 20 '18 at 11:14
I am not sure where you got the CORS error from, the error message shows `401`, which is related to authorization. From Another Thread: `"Receiving a 403 response is the server telling you, “I’m sorry. I know who you are–I believe who you say you are–but you just don’t have permission to access this resource. Maybe if you ask the system administrator nicely, you’ll get permission. But please don’t bother me again until your predicament changes.”` — Sid, Dec 20 '18 at 11:14
CORS is a BE error, not a Front-end one. Post the relevan BE stuff please. — Jacopo Sciampi, Dec 20 '18 at 11:17
`this.http.post` is going to make a cross-origin JSON formatted POST request, that requires a CORS preflight OPTIONS request, if that gets a 401 response then the CORS request will fail because the browser hasn't been given permission to make the POST request. — Quentin, Dec 20 '18 at 11:19
Why do you say this is a CORS problem? I don't see any mention to that in your post apart from title — dquijada, Dec 20 '18 at 11:19

Aman B · Answer 1 · 2018-12-20T11:34:36.690

Seems like you're not passing the authorization header with the request

const httpOptions = {
  headers: new HttpHeaders({
    'Authorization': 'my-auth-token'
  })
};

return this.http.post('https://promise-90488.firebaseio.com/data.json', users, httpOptions);

Check the docs here for more detail

To include authorization headers with all requests you can implement an interceptor to do that:

import { AuthService } from '../auth.service';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

  constructor(private auth: AuthService) {}

  intercept(req: HttpRequest<any>, next: HttpHandler) {
    // Get the auth token from the service.
    const authToken = this.auth.getAuthorizationToken();

    // Clone the request and replace the original headers with
    // cloned headers, updated with the authorization.
    const authReq = req.clone({
      headers: req.headers.set('Authorization', authToken)
    });

    // send cloned request with header to the next handler.
    return next.handle(authReq);
  }
}

You can read more about interceptors here

What type of authorization are you using? is it bearer token? — Aman B, Dec 20 '18 at 11:40

Getting 401 Unauthorized - CORS origin error while posting using HttpClient in Angular5

1 Answers1