Cross-Origin Request Blocked about book-monkey2-api

[fmalcher]

Hey, thanks for the message. Which combination of paths and methods did you try?
Do you run it locally or do you use our hosted version?

[stoennies]

Hey, I tried it both locally and hosted.
While accessing with POSTMAN it works. Using the BookStoreService from the book (translated in Angular 7) it raises the error :-(

BookMonkey runs locally with ng serve

[fmalcher]

Can you please show us the relevant code from the BookStoreService?

[stoennies]

Here we go!

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { map, retry, catchError } from 'rxjs/operators';
import { Observable, throwError  } from 'rxjs';

import { Book, Thumbnail } from './book';
import { BookFactory } from './book-factory';

@Injectable()
export class BookStoreService {
  private api = 'https://book-monkey2-api.angular-buch.com';
  private headers: Headers = new Headers();


  constructor(private http: HttpClient) { }

  private errorHandler(error: Error | any): Observable<any> {
    return throwError(error);
  }

  getAll(): Observable<Array<Book>> {
    return this.http
      .get<Book[]>(`${this.api}/books`)
      .pipe(
        retry(3),
        map(rawBooks => rawBooks
          .map(rawBook => BookFactory.fromObject(rawBook)),
        ),
        catchError(this.errorHandler)
      );
  }

  getSingle(isbn: string): Observable<Book> {
    return this.http
      .get<Book>(`${this.api}/book/${isbn}`)
      .pipe(
        retry(3),
        map(rawBook => BookFactory.fromObject(rawBook)),
        catchError(this.errorHandler)
      );
  }

  create(book: Book): Observable<any> {
    return this.http
      .post(`${this.api}/book`, book, { responseType: 'text' })
      .pipe(
        catchError(this.errorHandler)
      );
  }

  update(book: Book): Observable<any> {
    return this.http
      .put(`${this.api}/book/${book.isbn}`, book, { responseType: 'text' })
      .pipe(
        catchError(this.errorHandler)
      );
  }

  remove(isbn: string): Observable<any> {
    return this.http
      .delete(`${this.api}/book/${isbn}`, { responseType: 'text' })
      .pipe(
        catchError(this.errorHandler)
      );
  }

  getAllSearch(searchTerm: string): Observable<Array<Book>> {
    return this.http
      .get<Book[]>(`${this.api}/book/search/${searchTerm}`)
      .pipe(
        retry(3),
        map(rawBooks => rawBooks
          .map(rawBook => BookFactory.fromObject(rawBook))),
        catchError(this.errorHandler)
      );
  }

}

[fmalcher]

I tried it with the exact same code, both locally and online.
See my example here: https://stackblitz.com/edit/angular-bookstoreservice

Can you reproduce the error in the StackBlitz example?
Can you please post a screenshot of the HTTP request in the Chrome Network tab?

[stoennies]

Now I found it!!!!!!
I used the wrong API URL. I used book/search and not books/search :-(
But anyway strange error with CrossSiteScripting....

Thanks a lot for your help!!!

[fmalcher]

Aaah, great!
The Cross Origin error come from the depths of Node and Express... not the clearest error message, though. 😂

[JohannesHoppe]

Yeah, the book-monkey v2 we used for the book has room for improvements.

Request URL: https://book-monkey2-api.angular-buch.com/booksggg

t=147919 [st=206]        HTTP_TRANSACTION_READ_RESPONSE_HEADERS
                         --> HTTP/1.1 404
                             status: 404
                             date: Wed, 14 Nov 2018 21:20:36 GMT
                             content-type: application/json
                             set-cookie: __cfduid=da3b5303c5f15a30bc825d01bf78180ca1542230436; expires=Thu, 14-Nov-19 21:20:36 GMT; path=/; domain=.angular-buch.com; HttpOnly
                             via: 1.1 vegur
                             expect-ct: max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct"
                             server: cloudflare
                             cf-ray: 479c85e3199f5954-VIE
                             content-encoding: br
t=147919 [st=206]     -HTTP_TRANSACTION_READ_HEADERS

In case of an 404 the backend does not answer with a access-control-allow-origin header at all. So the browser is forced to ignore everything else and has to pretend to be dumb.

I fixed that for v3. Here CORS was implemented correctly:

Request URL: https://api.angular.schule/booksxxx

t=300909 [st=133]        HTTP_TRANSACTION_READ_RESPONSE_HEADERS
                         --> HTTP/1.1 404
                             status: 404
                             date: Wed, 14 Nov 2018 21:23:09 GMT
                             content-type: text/html; charset=utf-8
                             set-cookie: __cfduid=d7d959edf8a4f643d2a26b6fd918690c01542230589; expires=Thu, 14-Nov-19 21:23:09 GMT; path=/; domain=.angular.schule; HttpOnly
                             x-powered-by: Express
                             access-control-allow-origin: *
                             content-security-policy: default-src 'self'
                             x-content-type-options: nosniff
                             via: 1.1 vegur
                             expect-ct: max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct"
                             server: cloudflare
                             cf-ray: 479c899fbc9059a8-VIE
                             content-encoding: br
t=300909 [st=133]     -HTTP_TRANSACTION_READ_HEADERS