CODEWITHSUNDEEP
javascriptpaperjs
Chris Wang
Chris Wang

Reputation: 327

Paper.js external file will not load

I am just trying to get into paper.js. Code works fine when they're inlined. But when I move them to an external file and src it there, errors starts to pop up :( Can anyone figure out what I did wrong? Error screenshot is attached

Much thanks!

Error screenshot

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Paper.js Test</title>
		<script type="text/javascript" src="bower_components/paper/dist/paper-full.min.js"></script>
		<script type="text/paperscript" src="test.js" canvas="myCanvas"></script>
	</head>
	<body>
		<canvas id="myCanvas" resize="true"></canvas>
	</body>
</html>

Upvotes: 5

Views: 1629

Answers (3)

mmdfl
mmdfl

Reputation: 81

Unfortunately, you need to run this through a server to link the two files, either setting up an XAMPP server yourself or publishing your files to a hosted server so the http://... protocol can be used rather than file:/// (your case, because you are using a localhost).

One way to do this and solve your problem is:

1) navigate to your project folder in the terminal

2) if you have python v2.x installed then run: 

python -m SimpleHTTPServer

or for python v3.x:

python -m http.server

3) open up your browser and navigate to http://localhost:8000

4) select and open your .html file

It worked for me.

More details in related topic: "Cross origin requests are only supported for HTTP." error when loading a local file

Upvotes: 1

Chris Wang
Chris Wang

Reputation: 327

Ok turns out chrome has a same origin policy so I was cockblocked. Sapics' solution works, but if you want to take the easier route, if you're on mac (like I am), just go to terminal and type in "open -a Google\ Chrome --args --disable-web-security --user-data-dir", this'll open chrome without the cockblock

Edit: I'm putting Sapics' answer as the correct answer because I really appreciate the fact that he took the time to look into my specific issue and came up with a solution :)

Upvotes: 0

sapics
sapics

Reputation: 1114

From your screenshot, it is CORS ERROR.

You can fix CORS ERROR to test locally with https://www.thepolyglotdeveloper.com/2014/08/bypass-cors-errors-testing-apis-locally/

Upvotes: 3

Related Questions