Load Denied by X frame in browser

Question

I am trying to render the URL of a pdf file downloaded from cloudant. I am using angular and node to do this.

This is the iFrame html code

<iframe ng-src="{{trustSrc(bgFileUrl.src)}}" type="application/pdf" width="1400px" height="800px" > 
</iframe>

In my node server I have added these

app.use(function(req, res, next) {
    res.setHeader("Access-Control-Allow-Methods", "POST, PUT, OPTIONS, DELETE, GET");
    res.header("Access-Control-Allow-Origin", "http://127.0.0.1:8000/");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    res.header("Access-Control-Allow-Headers","*");
    res.header('Access-Control-Allow-Credentials', true);
    next();
});

my app is running on port http://127.0.0.1:8000/. The i frame does not render on mozilla and fails with the following error

Load denied by X-Frame-Options: https://myaccount.cloudant.com/ does not permit framing by http://127.0.0.1:8000/file.

The iframe loads in google chrome but with this error.

Invalid 'X-Frame-Options' header encountered when loading 'https://myaccount.cloudant.com/db/filename/attachment': 'ALLOW-FROM https://myaccount.cloudant.com' is not a recognized directive. The header will be ignored.

Could someone please help me on what to add to prevent this form happening. I am a beginner in this and help is appreciated