引用import的JS报错：Access to script at 'file:' from origin 'null' has been blocked by CORS policy（3种解决手段）

最新推荐文章于 2024-07-02 12:39:32 发布

溜_x_i_a_o_迪

最新推荐文章于 2024-07-02 12:39:32 发布

阅读量4.3w

点赞数 54

分类专栏：问题解决文章标签： js nodejs es6 前端 javascript

本文链接：https://blog.csdn.net/u013946061/article/details/106077527

版权

问题解决专栏收录该内容

14 篇文章 0 订阅

订阅专栏

直接引用带有import关键字的JS脚本会报错：Access to script at ‘file:’ from origin ‘null’ has been blocked by CORS policy

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
<script type="module">
import a from './a.js';
console.log(a);
</script>
</html>

a.js

console.log("a文件");
let a = 10;
export default a;

报错

我们把错误粘贴出来

Access to script at ‘file:///C:/xampp/htdocs/myblog/web/%E5%AD%A6%E4%B9%A0/2019-11-20nodejs01/ code /%E4%B8%8A%E6%AC%A1%E5%86%85%E5%AE%B9/es6%E6%A8%A1%E5%9D%97%E5%8C%96/a.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.

百度翻译是：无法从原点“null”访问
在别的浏览器都可以，而在唯独在谷歌浏览器不行，查找了一些资料原因大概就是谷歌浏览器安全机制导致的，不允许在本地直接运行，它会当作跨域访问了。

GET file:///C:/xampp/htdocs/myblog/web/%E5%AD%A6%E4%B9%A0/2019-11-20nodejs01/ code /%E4%B8%8A%E6%AC%A1%E5%86%85%E5%AE%B9/es6%E6%A8%A1%E5%9D%97%E5%8C%96/a.js net::ERR_FAILED

npm install express -g

安装完之后直接使用express还是会报错

Node.js Error: Cannot find module express

于是xiao迪查了一下：

express 4.x版本中将命令工具分出来,安装一个命令工具,执行命令:

npm install -g express-generator

输入express --version验证

发现没问题啊，还是报错，最终我放弃了。

直接在目录下装：

npm install express

发现才能成功。

然后我在index.html上一级目录创建：server.js

var express = require("express");
var app = express();
app.use(express.static("我的目录")).listen(3000);

在终端开启服务 node server.js

在浏览localhost:3000/index.html，发现终于成功了。

2020.5.12 18:00 补充

偶尔会出现这种问题，并且重新换端口，也提示端口已经被占用。（很坑！！！）

解决端口号被占用的方法：listen EADDRINUSE: address already in use :::XXXX

在命令行输入命令netstat -ano|findstr “5000” ，查看5000端口是否被占用及占用此端口的PID，从下图中可以看到占用端口的进程ID(PID)为14344

在这里插入图片描述

tasklist|findstr “14344”，查看此PID对应的进程名
如下图所示，可以看到14344对应的进程名称为node.exe

在这里插入图片描述
强烈推荐此方法

taskkill /f /t /im node.exe关掉进程或者用任务管理器关掉进程

在这里插入图片描述
解决端口的方法转自Damao97博主

2020.5.12 20:00 补充

各位不好意思，xiao迪又发现了一个更加完美的办法，都有点后悔折腾这么长时间了！！！！
建议大家去 vs code 下载Live Server插件即可完美解决：
在这里插入图片描述
注意需要切换：

运行html即可（xiao迪这里修改了自己喜欢的快捷键）

默认打开的是http://127.0.0.1:5500/…