解决File协议导致的CORS限制，用Node.js搭建本地服务器

yulamz

已于 2024-10-30 23:56:20 修改

阅读量1.3k

点赞数 16

分类专栏：跨域 node 文章标签： node.js

于 2024-06-21 18:50:42 首次发布

本文链接：https://blog.youkuaiyun.com/qq_42203909/article/details/139867299

版权

文章目录

一、前言
二、分析报错原因
三、如何解决
四、具体步骤

你是否曾遇到这样的困境：在本地使用file://协议直接打开HTML文件时，由于现代浏览器的安全限制，无法跨源请求（CORS）本地资源？尤其是当你试图通过 <script type="module">标签导入本地JS模块时，浏览器会将其视为跨源请求，但file://协议并不支持CORS，导致你的代码无法正常运行。

现在，有一个简单而高效的解决方案！通过搭建一个本地服务器，你可以轻松地在本地环境中测试HTML和JS代码，无需担心CORS问题。在本文中，我将教你如何使用Node.js快速搭建一个本地服务器，让你的开发工作更加顺畅。无需复杂的配置，只需简单几步，即可实现本地文件的快速访问与调试。快来跟随我，一起解决这个令人头疼的CORS限制吧！

一、前言

闲来无事，我写了一个防抖函数，想测试它的可行性。于是，我就在本地创建了一个debounce.js文件。

function debounce(fn, delay = 500) {
   
  let timer = null;
  return function () {
   
    if (timer) {
   
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
   
      fn.apply(this, arguments);
      timer = null;
    }, delay);
  };
}

export {
    debounce };

顺带，我就写了一个简单的test.html文件，想着校验一些自己写的函数对不对。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta

最低0.47元/天解锁文章