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

news2024/11/17 15:28:10

这里写目录标题

- - 测试用代码
  - 执行代码后控制台报错现象
  - 解决方案

测试用代码

先把测试用的代码贴出来

测试代码结构
在这里插入图片描述
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 即可