Payload (Empty Content-Type) Forbidden Error | While downloading a pdf file from the server in ember

Question

Objective: Want to download a PDF file from the server by generating the below URL: http://localhost:4200/bookStore/secured/rest/books/14119

The URL gets generated when the below line gets executed in the book.js in routes.

return this.store.findRecord('book', bookId);

But I get 403 forbidden error. The error in details:

Error: Ember Data Request GET /bookStore/secured/rest/books/14119 returned a 403
Payload (Empty Content-Type)
Forbidden
    at new AdapterError (-private.js:3170)
    at Class.handleResponse (rest.js:594)
    at ajaxError (rest.js:956)
    at Class.hash.error (rest.js:623)
    at fire (jquery.js:3317)
    at Object.fireWith [as rejectWith] (jquery.js:3447)
    at done (jquery.js:9274)
    at XMLHttpRequest.<anonymous> (jquery.js:9514)

Do I need to set the content-type as 'application/pdf'? and if yes, then please suggest how to set it.

Below is the JS code:

routes\\book.js

actions: {
    pdfClick(bookId) {
      return this.store.findRecord('book', bookId);
   }
}

template\\book.hbs

<button {{action "pdfClick" book.bookId}}>PDF</button>

In the server side, the code which receive and respond the request is as follows:

@GET
@Path("/{bookId}")
@Produces("application/pdf")
public Response bookExport(@PathParam("bookId") long bookId) {
   //Code
}

According to the server side code, we are getting PDF file from the server. This is tested successfully using PostMan.

Answer 1

It looks like you are trying to use Ember Data to download the PDF file. Ember Data is mostly meant to handle JSON data though, so this might not be the best fit in this case. You could still keep using Ember Data for everything else, but for downloading the PDF I'd recommend to only use it to generate the correct URL.

You should be able to generate the URL roughly like this:

let url = this.store.adapterFor('book').urlForFindRecord(bookId, 'book');

or just:

let url = `http://localhost:4200/bookStore/secured/rest/books/${bookId}`;

if you don't want to use Ember Data for this at all.

Finally to download the PDF you could use:

document.location.assign(url);

or convert your button to a link:

<a href={{url}}>Download PDF</a>

Answer 2

You are doing a request to http://localhost:4200/bookStore/secured/rest/books/14119 , but this is the Ember development server. If you use ember data, you can customize the host in the adapter. See this section of the documentation for how to do that.

Note that Ember Data does not know how to deal with PDF files automatically. If you just want to download it, I suggest just linking to it directly with an <a href="location of pdf file" .

Answer 3

You want to retrieve a binary (pdf) as response to a rest call. You have several different options:

First one is the same with TBienek's <a href={{url}}>Download PDF</a> aproach. I think it is the simplistic and cross-browser solution. This will eleminate the need to rest call.

Second one is to send pdf bytes in a json object such as:

{
  content:'<base64 encoded byte arr>',
  filename:'<string>,
  contentType: 'application/pdf'
}

After that create a Blob with content and trigger to open it (via window.open ).

There is also a third alternative using with XMLHttpRequest without changing your current server endpoint. Use the response of XMLHttpRequest as content in the second option.

None of them has a usage of Ember Data.