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 即可

相关推荐
Thomas_YXQ6 小时前
Unity3D RectTransform.rect属性详解
unity·编辑器·游戏引擎·材质
Murphy_lx12 小时前
vim指令
linux·编辑器·vim
theRavensea12 小时前
在VSCode中使用Vim模式
ide·vscode·vim
小猪写代码12 小时前
vim 编辑器
linux·编辑器·vim
XJxsmyj5212 小时前
vim复制本地到linux服务器上,换行缩进过大,不对的问题
linux·编辑器·vim
数字冰雹19 小时前
图观 应用编辑器 产品介绍
microsoft·编辑器
wangduqiang74721 小时前
VSCode 下 PlatformIO 的使用
ide·vscode·编辑器
weixin_4428254021 小时前
goland 配置自己定义的proto文件
编辑器
ONLYOFFICE1 天前
如何在ONLYOFFICE中使用OCR工具:轻松识别图片和PDF中的文字
编辑器·ocr·office
ZKY_241 天前
【VsCode】离线状态下安装插件
vscode