RapiPdf icon indicating copy to clipboard operation
RapiPdf copied to clipboard

Demo pages don't work for private content

Open akzincsystems opened this issue 5 years ago • 6 comments

Just tried your home page demo with a file:/// uri and with a https:// url that only I can see from my location.

neither works.

Does that mean that hidden behind the scenes your javascript is calling a server that want's to connect to those resources?

Not finding anything here to help me use this locally (or within a build chain, my main priority).

Any suggestions gratefully received.

Thanks

akzincsystems avatar Feb 01 '21 17:02 akzincsystems

well, checkout the QuickStart section,

you need to create an HTML with the following content

<!doctype html>
  <html>
  <head>
    <script src="https://unpkg.com/rapipdf/dist/rapipdf-min.js"></script>
  </head>
  <body>
    <rapi-pdf
      spec-url = "path/of/your/spec/file"
      button-bg = "#b44646" 
    > </rapi-pdf>
  </body> 
  </html>

place this html, on a server from where you can access your spec. the other option would be to upload your spec to a public location such as github, and try to use that for generation

mrin9 avatar Feb 05 '21 14:02 mrin9

I used the quickstart section as a guide.

if I have

<!doctype html>
<html>
<head>
    <script src="https://unpkg.com/rapipdf/dist/rapipdf-min.js"></script>
</head>
<body>
<rapi-pdf
        spec-url = "file:///home/me/docs/openapi.yml"
        button-bg = "#b44646"
> </rapi-pdf>
</body>
</html>

It doesn't work. Nor does spec-url = "/home/me/docs/openapi.yml"

The page is displayed with a button. Clicking the button does nothing. Error in console is

rapipdf-min.js:8673 Fetch API cannot load file:///home/akitson/Projects/Synapse/api-logon-service/docs/openapi.yml. URL scheme must be "http" or "https" for CORS request.

Changing the spec-url to https://docs.ops.zinc.systems/authentication.yml (only I can see this url) gives

Access to fetch at 'https://docs.ops.zinc.systems/authentication.yml' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

So, your fetch mechanism doesn't recognise a local file. That will make the app difficult to use in a build chain.

CORS is more problematic and is possibly due to the browser, rather than your code. Do you have a way of running this locally in a script? I don't see any tests so cannot determine how to run it locally.

akzincsystems avatar Feb 06 '21 13:02 akzincsystems

can you try a relative url have the html and spec file in the same location and specify spec-url="./openapi.yml"

something like this

<!doctype html>
<html>
<head>
    <script src="https://unpkg.com/rapipdf/dist/rapipdf-min.js"></script>
</head>
<body>
    <rapi-pdf spec-url = "./openapi.yml"> </rapi-pdf>
</body>
</html>

mrin9 avatar Feb 09 '21 18:02 mrin9

Same issue using relative path: Fetch API cannot load file:///home/akitson/Projects/Misc/architecture/openapi.yml. URL scheme must be "http" or "https" for CORS request.

Uncaught (in promise) TypeError: Cannot read property 'paths' of undefined

So for a file path, it is still trying to do a CORS request

akzincsystems avatar Feb 10 '21 11:02 akzincsystems

I disabled CORS in the browser as per https://alfilatov.com/posts/run-chrome-without-cors/ and still get the CORS error above. This perhaps suggest that CORS is being handled in the code rather than the browser.

akzincsystems avatar Feb 10 '21 11:02 akzincsystems

I found a (not automated) way to generate docs, if your spec does not contain any sensitive data you can upload your file as a JSON bin on a site such as: https://www.npoint.io/

With your content uploaded and available through a public URL with properly-set CORS restrictions in response headers, the lib should work as expected. Hope it helps someone!

cfecherolle avatar Mar 14 '22 10:03 cfecherolle