npm安装anywhere( 随启随用的静态文件服务器),分分钟解决浏览器请求本地js文件跨域问题

以下是一个html文件, chrome浏览器打开该文件;

html 复制代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=600, initial-scale=1.0">
    <title>Vite App</title>
    <script type="module" crossorigin src="/assets/index-GxicIufr.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/index-U9LxSyeS.css">
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

报错如下:

js 复制代码
Access to script at 'file:///Users/***/Documents/code/learning/vue/vue-project/dist/assets/index-GxicIufr.js' 
from origin 'null' has been blocked by CORS policy: 
Cross origin requests are only supported for protocol schemes: 
http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.
index.html:8 
 Access to CSS stylesheet at 'file:///Users/shuangguiyu/Documents/code/learning/vue/vue-project/dist/assets/index-U9LxSyeS.css' 
 from origin 'null' has been blocked by CORS policy:
 Cross origin requests are only supported for protocol schemes:
 http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.
index.html
        

全局安装anywhere npm install -g anywhere,再前往html文件所在目录执行anywhere -p 8081

Anywhere 随启随用的静态文件服务器。 www.npmjs.com/package/any...

相关推荐
前端一课几秒前
【vue高频面试题】第 21 题:Vue3 中的 Slot(插槽)— 基础、原理、使用场景、面试必问点
前端·面试
前端一课1 分钟前
第 24 题:Vue3 的组件通信方式(props / emit / v-model / provide-inject / expose / eventBus
前端·面试
前端一课2 分钟前
第 22 题:Teleport 的作用、原理和使用场景
前端·面试
前端一课2 分钟前
第 29 题:Vue3 的 Teleport 原理(跨层级 DOM 挂载技术)
前端·面试
前端一课2 分钟前
第 31 题:Vue3 中 watchEffect 的原理(依赖自动追踪 + 清理机制 + ReactiveEffect 全流程)
前端·面试
前端一课2 分钟前
第 256 题:Vue3 的异步组件(defineAsyncComponent)+ Suspense 原理与面试高频点
前端·面试
前端一课4 分钟前
第 27 题:Vue3 + TS 类型推断(Props 类型推导、Emit 类型推导、Setup 返回值类型)
前端·面试
是罐装可乐10 分钟前
前端架构知识体系:通过发布-订阅者模式解耦路由和请求
前端·架构·vue·路由
杀死那个蝈坦13 分钟前
监听 Canal
java·前端·eclipse·kotlin·bootstrap·html·lua
程序员小寒18 分钟前
Vue.js 为什么要推出 Vapor Mode?
前端·javascript·vue.js