VSCode解决本地浏览器需要跨域问题

这里写目录标题

测试用代码

先把测试用的代码贴出来

测试代码结构

index.html

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- type="module"意思是直接开启es6模块化 -->
    <script src="./main.js" type="module"></script>
    sss
</body>
</html>

counter.js

javascript 复制代码
export const count = 0;

main.js

javascript 复制代码
import { count } from "./counter.js"

console.log("count");

执行代码后控制台报错现象

Access to script at 'file:///D:/%E5%AD%99%E7%91%9C/%E7%AC%94%E8%AE%B0/%E5%89%8D%E7%AB%AF/vite/vite%E5%AD%A6%E4%B9%A0/test-vite/main.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.

解决方案

给VSCode安装 Live Server 插件

主要作用是在本地开启一个HTTP Server,并且可以监听Ctrl+S动作进行页面自动刷新。即最常见的就是我们在写html时,我们需要在浏览器查看页面布局效果,这时我们可以用Liver Server来打开这页面并再每次保存时刷新页面。

使用时启动页面下方的 Go Live 即可

相关推荐
我狸才不是赔钱货8 小时前
DevOps:打破开发与运维之间的高墙
运维·vscode·docker·devops
我狸才不是赔钱货9 小时前
揭开命令行的面纱:终端、CLI、Shell的终极辨析
vscode·ssh·bash
空影星11 小时前
SiriKali,一款跨平台的加密文件管理器
python·编辑器·电脑·智能硬件
TLucas11 小时前
Layui连线题编辑器组件(ConnectQuestion)
前端·编辑器·layui
添砖java‘’17 小时前
vim高效编辑:从入门到精通
linux·编辑器·操作系统·vim
非得登录才能看吗?21 小时前
VScode 入门(设置篇)
ide·vscode·编辑器
AlphaFinance1 天前
Windows下Vscode连接到WSL的方法
ide·vscode·编辑器
Dobby_051 天前
【Go】C++ 转 Go 第(二)天:变量、常量、函数与init函数
vscode·golang·go
空影星1 天前
Tablecruncher,一款轻量级CSV编辑器
python·编辑器·电脑·智能硬件
开发游戏的老王2 天前
虚幻引擎入门教程:虚幻编辑器的基本操作
编辑器·游戏引擎·虚幻