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 天前
Unity 性能优化 之 编辑器创建资源优化( 工作流 | 场景 | 预制体)
unity·编辑器·游戏引擎
CAE虚拟与现实1 天前
VSCode中的下载VSIX是指什么?
ide·vscode·编辑器
路边闲人21 天前
vscode启用GEMINI CODE ASSIST插件
ide·vscode·gemini
CAE虚拟与现实1 天前
VSCode官方汉化包
ide·vscode·编辑器·vscode汉化
CAE虚拟与现实1 天前
VSCode创建Python项目和运行py文件
ide·vscode·编辑器
Stardep1 天前
ssh远程连接服务器到vscode上“连接失败”
服务器·vscode·ssh
患得患失9492 天前
【前端】【高德地图WebJs】【知识体系搭建】面要素知识点——>多边形,圆形, 矩形,图形编辑器
前端·编辑器·高德地图·amap
superior tigre2 天前
1.linux环境配置+ssh远程连接vscode调试(问题:无法联网,无法共享粘贴板,不满足运行vscode服务器的先决条件)
linux·服务器·vscode
网硕互联的小客服2 天前
如何解决Ubuntu下vi编辑器方向键变字母的问题?
编辑器
老黄编程2 天前
VSCode 的百度 AI编程插件
ide·vscode·ai编程