Это кажется глупым, но это раздражает. Я использую VScode и пытаюсь закодировать js-скрипт в другой файл, чтобы получить синтаксис выделения, но он не работает (я мог бы изменить содержимое json, как предложено в другом вопросе stackoverflow, и ввести его в строку, но я бы хотел хотел бы иметь отдельный файл).
Все файлы находятся в одной папке:
- бумажный full.js
- circles.js
- circles.html
Если я пытаюсь запустить html-страницу со встроенным скриптом, хром загружается плавно
круги.html со встроенным сценарием
circles.html
<!DOCTYPE html>
<html>
<head>
<title>Circles</title>
<!-- Load the Paper.js library -->
<script type="text/javascript" src="paper-full.js"></script>
<link rel="stylesheet" type="text/css" href="circles.css">
<!-- <script type="text/paperscript" src="circles.js" canvas="myCanvas"></script> -->
<script type="text/paperscript" canvas="myCanvas">
// Create a Paper.js Path to draw a line into it:
var path = new Path();
// Give the stroke a color
path.strokeColor = 'black';
var start = new Point(100, 100);
// Move to start and draw a line from there
path.moveTo(start);
// Note the plus operator on Point objects.
// PaperScript does that for us, and much more!
path.lineTo(start + [ 100, -50 ]);
</script>
</head>
<body>
<canvas id="myCanvas" resize></canvas>
</body>
</html>
Но когда я пытаюсь получить отдельный файл для этого скрипта (как предложено в http://paperjs.org/tutorials/getting-started/working-with-paper-js/),, браузер выдает ошибку
Circles.html и circle.js, в разных файлах
circles.html
<!DOCTYPE html>
<html>
<head>
<title>Circles</title>
<!-- Load the Paper.js library -->
<script type="text/javascript" src="paper-full.js"></script>
<link rel="stylesheet" type="text/css" href="circles.css">
<!-- <script type="text/paperscript" src="circles.js" canvas="myCanvas"></script> -->
<script type="text/paperscript" canvas="myCanvas" src="circles.js"></script>
</head>
<body>
<canvas id="myCanvas" resize></canvas>
</body>
</html>
circles.js
// Create a Paper.js Path to draw a line into it:
var path = new Path();
// Give the stroke a color
path.strokeColor = 'red';
var start = new Point(100, 100);
// Move to start and draw a line from there
path.moveTo(start);
// Note the plus operator on Point objects.
// PaperScript does that for us, and much more!
path.lineTo(start + [ 100, -50 ]);
var myCircle = new Path.Circle(new Point(100, 70), 50);
myCircle.fillColor = 'black';
Оповещения браузера:
Ошибка 1:
Access to XMLHttpRequest at 'file:///Users/jarvis/Documents/webnoob/webdev/basscolors/circles.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
request @ paper-full.js:13929
paper-full.js:13929
Ошибка 2:
Uncaught DOMException: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file:///Users/jarvis/Documents/webnoob/webdev/basscolors/circles.js'.
at Object.request (file:///Users/jarvis/Documents/webnoob/webdev/basscolors/paper-full.js:13929:14)
at HTMLCollection.loadScript (file:///Users/jarvis/Documents/webnoob/webdev/basscolors/paper-full.js:16957:10)
at HTMLCollection.forIn (file:///Users/jarvis/Documents/webnoob/webdev/basscolors/paper-full.js:56:11)
at Function.each (file:///Users/jarvis/Documents/webnoob/webdev/basscolors/paper-full.js:75:7)
at loadAll (file:///Users/jarvis/Documents/webnoob/webdev/basscolors/paper-full.js:16974:8)
Внимание:
[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.
request @ paper-full.js:13905
Я попробовал некоторые ответы через Google об этой ошибке, но никто из них не решил ее, похоже, мне больно протокол http. Как мне это исправить, чего мне не хватает?