VSCode解决本地浏览器需要跨域问题
这里写目录标题
- 测试用代码
- 执行代码后控制台报错现象
- 解决方案
测试用代码
先把测试用的代码贴出来
测试代码结构
index.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
export const count = 0;
main.js
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 即可
