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

相关推荐
九河_1 小时前
服务器在线安装插件失败/离线安装VSIX
vscode·extension·pylance
小池先生12 小时前
用vscode查日志方便的搜索-复制所有匹配行功能
ide·vscode·编辑器
zstar-_17 小时前
FreeGIF:让制作动图变得超简单
编辑器·gif
原小明17 小时前
【Conda】Conda虚拟环境配置系统环境变量,Jupter可使用
vscode·python·jupyter·conda
UpYoung!18 小时前
【Typora——MD编辑器】Typora最新 V1.12.1版:轻量级 Markdown 编辑器详细图文下载安装使用教程
学习·数学建模·编辑器·运维开发·个人开发
慧都小项20 小时前
Parasoft C/C++test如何将静态分析集成到VSCode中
vscode·静态分析·parasoft
kymix1 天前
vscode 远程管理docker时,提示权限不足无法获取容器列表问题
ide·vscode·docker
Gary Studio1 天前
VSCODE GDB调试
ide·vscode·编辑器
老程序员刘飞1 天前
vscode 连接 wsl
ide·vscode·编辑器
图亚Vanta2 天前
Python入门第一课:Python安装、VSCode/Pycharm配置
vscode·python·pycharm