This question already has answers here:
"Cross origin requests are only supported for HTTP." error when loading a local file
(30 answers)
Closed 10 months ago.
I am trying to make a basic test program for paper.js, which I intend to use for a project.
I am using chrome to run the HTML and when I open the dev tools chrome seems to simply not load one of my scripts. My file structure is:
Test
|---mario.svg
|---html.html
|---scripts/
| |---script.js
| |---paper-core.js
And here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="./scripts/paper-full.min.js"></script>
<script type="text/paperscript" src="./scripts/script.js" canvas="myCanvas"></script>
</head>
<body>
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #d3d3d3;">
</canvas>
</body>
</html>
veiw.onFrame = function(event){
project.importSVG('.../mario.svg');
};
In the chrome dev tools however, under sources, I would expect to see something that matches my file structure, and I do, except script.js is missing.
Also it gives me this error:
Access to XMLHttpRequest at 'file:///C:/Users/jacob/Documents/JS/Testing/scripts/script.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.
ht # paper-full.min.js:32
I think it must be something to do with the text/paperscript, but I really don't know and definately don't know how to fix it. I've looked at examples and can't figure out what I am doing differently. The mario.svg doesn't show up either but I think that's just because its not referenced in the html. Can someone explain this please?
At first sight, I would say that your PaperScript code is not run because you load the wrong version of Paper.js.
You are loading paper-core.js which is the version of Paper.js that does not support PaperScript. You should load paper-full.js instead.
I'm building an app that will have an interactive PDF form on a server (in HTML, CSS, JS). I have been trying to use the Grapecity PDF viewer, but to no avail. I've followed the documentation to a T, using these resources: one, two, three.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<title>GC Viewer Demo | PDF Plugin</title>
<link rel="stylesheet" href="https://cdn.materialdesignicons.com/2.8.94/css/materialdesignicons.min.css">
<script>
function loadPdfViewer(selector) {
var viewer = new GcPdfViewer(selector, { renderInteractiveForms: true });
viewer.addDefaultPanels();
viewer.open("HelloWorld.pdf");
}
</script>
</head>
<body onload="loadPdfViewer('#root')">
<div id="root"></div>
<script type="text/javascript" src="gcpdfviewer.js"></script>
</body>
</html>
I currently have the "HelloWorld.pdf" and the gcpdfviewer javascripts in the same folder as the above index.html but every time I test the code in the browser, the PDF viewer loads, but the PDF doesn't, giving me an error that states "missing PDF."
This is really bothering me because the PDF is exactly where it's supposed to be, I think.
I'm currently not using a license key, but the documentation makes it seems like I don't need one. Maybe that's the issue.
Any ideas?
Edit - Here are the console errors in Chrome:
The pdf worker has been disabled. Note, rendering PDF in foreground thread can slow pdf viewer performance.
ce # gcpdfviewer.js:1
index.html:1 Access to XMLHttpRequest at 'file:///C:/HelloWorld.pdf' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
HelloWorld.pdf:1 Failed to load resource: net::ERR_FAILED
index.html:1 Uncaught (in promise) V
Firstly, the issue is not because of the non-license version.
The issue occurs because you are trying to execute the sample locally using the file system. To overcome this issue, you should host the application on a local server and the Pdf will be loaded in the PdfViewer.
While loading a Pdf in the PdfViewer, there is XMLHttpRequest which checks the origin. This is null in the case of the file system. Hence, throws the error on accessing the file.
Here is the documentation link for configuring the PdfViewer:
https://www.grapecity.com/documents-api-pdf/docs/online/view-pdf.html
Regards,
Manish Gupta
Thank you for using GCPDF Viewer. Is the filename exactly the same, it might be case-sensitive OS?
Can you look in the browser network tab and watch for the request going to retrieve the PDF file, is it looking in the same location where you have placed the file.
which server software are you running? is it serving the PDF file?
http://www.grapecity.com
As stated earlier, for security reasons, it is not possible to access files on your local filesystem via JavaScript, you need to set up a web server and open PDF files using the web server url.
But if you really want to do it, there is another workaround - start Chrome with disabled web security, and then open the index.html page from the local file system, for example:
"c:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --user-data-dir="C:/temp/CustomChromeSession" --disable-web-security "file:///C:/temp/gcpdfviewer-test/index.html"
Note, this workaround is not recommended due to security reasons and this approach can be disabled by browser developers later.
Here's a screenshot of how it works
I am trying to include a YouTube subscribe button in localhost and it does not seem to work, while in JSfiddle it works perfectly fine. Am I doing something wrong? I am using code from https://developers.google.com/youtube/youtube_subscribe_button
My code on localhost:
<!DOCTYPE html>
<html>
<head>
<title>Testing a YouTube button</title>
<script src="https://apis.google.com/js/platform.js"></script>
</head>
<body>
<div class="g-ytsubscribe" data-channelid="UCWTfbcQsyNLv1ZLsZrhVW2w" data-layout="full" data-count="default"></div>
</body>
</html>
JSFiddle example
Thanks!
It works fine when I test it on http://localhost, but it fails when I test it using a file:// URL.
The console reports:
cb=gapi.loaded_0:45 Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('file://') does not match the recipient window's origin ('null').
The script only works when you load the webpage of HTTP(S). Don't try to use it on file: URLs (and always look at the console for error messages!).
I have made a WPF application with a browser and set it to go to a website which is using firebase and angularjs. When I run the program I get errors such as "Unable to get property 'prototype' of undefined or null reference" and it shows the source of this error as angular.min.js. Another error is within the firebase.js file and it just says "Script error". The website works perfectly on actual browsers such as Chrome or even IE11. How can I fix these errors?
Thanks in advance!
Show me your html file where you import angular.min.js and firebase.js.
Maby can be fixed with a DOCTYPE:
<!DOCTYPE html>
And a meta tag:
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
I am getting this error on a website I'm working on, I have simplified the code down to the below example, which produces this error in webkit (chrome 15.0.x), I don't see the error in firefox.
I have looked around at other SO posts regarding the same error and most of them are in reference to using the youtube API and cross domain references.
I have tried:
changing the doctype, (no difference)
adding origin params to the youtube call (no difference)
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title></title>
</head>
<body class="page front logged-in no-sidebars">
<iframe width="393" height="230" src="http://www.youtube.com/embed/QH2-TGUlwu4" frameborder="0" ></iframe>
</body>
</html>
This is a common issue with cross-site messaging (where one page/website communicates with another page/website via an IFrame using javascript callbacks as a medium). It doesn't always work out and some browsers may not always catch the callback event and may register it as a security error if the protocol or port differs.