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

这里写目录标题

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

测试用代码

先把测试用的代码贴出来

测试代码结构
VSCode解决本地浏览器需要跨域问题_第1张图片
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>Documenttitle>
head>
<body>
    
    <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来打开这页面并再每次保存时刷新页面。
VSCode解决本地浏览器需要跨域问题_第2张图片
使用时启动页面下方的 Go Live 即可
VSCode解决本地浏览器需要跨域问题_第3张图片

你可能感兴趣的:(vscode,编辑器)