尝试使用导入的 js 函数启动 html 页面时出现“CORS 策略已阻止从源‘null’访问脚本”错误

Posted 2023-02-22

技术标签:

【中文标题】尝试使用导入的 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 【发布时间】：2020-05-11 17:41:17 【问题描述】：

我在尝试使用从另一个文件导入函数的 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

这是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>

从html调用的js文件：(funcexecute.js)

import sumup from '/funcfile.js';
console.log(sumup(1,2));

进口模块： (funcfile.js)

function sumup(num1, num2)
    return num1+num2;

export default sumup;

我该如何解决这个问题？（我使用 vscode）

【问题讨论】：

您的文件需要使用 http 或 https 协议，而不是 file:///。要么使用远程服务器，要么设置本地服务器，现在很容易，例如使用 NodeJS 和Express。然后您就可以使用localhost 访问您的文件 【参考方案1】：

这个问题是因为文件是直接打开的；所以似乎有几种方法可以解决这个问题：一种是禁用 Chrome 中的安全性，尽管尽我所能，但我无法让它放弃幽灵：我尝试了各种组合 -disable- Chrome 的网络安全标志。

第二种选择是在本地托管网站。有那么一小会儿，我考虑过使用 IIS Express 之类的东西；但幸运的是，我遇到了这个工具，它可以为你在本地托管一个网站。

它可以作为 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

然后您可以导航到您的特定页面；例如：