尝试使用导入的 js 函数启动 html 页面时，“CORS 策略已阻止从源‘null’访问脚本”错误
[英]"access to script from origin 'null' has been blocked by CORS policy" error while trying to launch an html page using an imported js function
问题描述
I got this error while trying to launch an html page using a javascript file which imported a function from another file:
我在尝试使用从另一个文件导入函数的 javascript 文件启动 html 页面时遇到此错误：
Access to script at 'file:///C:/Users/bla/Desktop/stuff/practice/jsPractice/funcexecute.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.
Failed to load resource: net::ERR_FAILED
Here's the html code:这是html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
<script type = 'module' src='funcexecute.js'></script>
</body>
</html>
js file which was called from the html: (funcexecute.js)从 html 调用的 js 文件：(funcexecute.js)
import sumup from '/funcfile.js';
console.log(sumup(1,2));
Imported module: (funcfile.js)导入的模块：（funcfile.js）
function sumup(num1, num2){
return num1+num2;
}
export default sumup;
How can i fix this?我怎样才能解决这个问题？ (im using vscode) （我正在使用 vscode）
5 个解决方案
解决方案1
11 2020-06-03 18:02:18
You cannot use a script file as a module without using a server.如果不使用服务器，就不能将脚本文件用作模块。 Take a look here看看这里
Here are some of the options以下是一些选项
- Use Live Server (Extension for VS Code)使用 Live Server（VS Code 的扩展）
- Use http-server module from node (install via npm then run
http-server .from your project directory)使用 node 中的http-server模块（通过 npm 安装，然后从项目目录运行http-server .） - use http.server package from python使用 python 中的http.server包
- use a wamp (or lamp) server使用 wamp（或灯）服务器
In short cannot use type="module" with file protocol总之不能使用type="module"与文件协议
解决方案2
1 2021-01-07 06:06:03
Right click the index.html file in Visual Studio Code, select Open with Live Server .右键单击 Visual Studio Code 中的index.html文件，选择Open with Live Server 。
This will fix your issue.这将解决您的问题。
Exports/Imports in JS only work on servers, they DO NOT work on local machines (there is a different code for that). JS 中的导出/导入仅适用于服务器，它们不适用于本地机器（有不同的代码）。
Here is how to do it, step by step instructions .这是如何做到这一点，分步说明。
解决方案3
1 2021-03-26 02:24:33
type = "module"is usually used with webpack.type = "module"通常与 webpack 一起使用。If you don't use webpack, you need to start a static service
如果不使用webpack，则需要启动一个静态服务u can use
http-server -p 8003start a service你可以使用http-server -p 8003启动服务
解决方案4
1 2021-05-08 18:02:50
The issue is caused because the file is being opened directly;问题是因为文件是直接打开的； so there seemed to be a couple of ways around this: one is to disable the security in Chrome, although try as I might, I couldn't manage to get it to give up the ghost: I tried various combinations around the –disable-web-security flag of Chrome.所以似乎有几种方法可以解决这个问题：一种是禁用 Chrome 中的安全性，尽管尽我所能，但我无法让它放弃幽灵：我尝试了围绕 –disable- 的各种组合Chrome 的网络安全标志。
The second option is to host the site locally.第二种选择是在本地托管站点。 For a brief moment I considered using something like IIS Express;有那么一瞬间，我考虑使用 IIS Express 之类的东西； but fortunately, I came across this tool that hosts a site locally for you.但幸运的是，我遇到了这个工具，它可以为您在本地托管一个站点。
It can be installed as an npm package: npm install --global http-server Once installed, you just navigate to the relevant directory, and type http-server:它可以作为 npm 包安装： npm install --global http-server 安装后，您只需导航到相关目录，然后键入 http-server：
C:\\repos\\webanimations\\animated-columns-optimised>http-server Starting up http-server, serving ./ Available on: http://192.168.1.79:8080 http://127.0.0.1:8080 http://172.17.230.225:8080 Hit CTRL-C to stop the server
You can then navigate to your specific page;然后您可以导航到您的特定页面； for example:例如：
http://127.0.0.1:8080/columns
And no more CORS error (doesn't quite work yet, but that's a whole different story).并且没有更多的 CORS 错误（还不太有效，但那是一个完全不同的故事）。
解决方案5
0 2021-02-01 07:52:45
将脚本链接中的type="module"替换为type="JavaScript" 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.