如何在Visual Studio Code中通过LocalHost打开html文件

最新推荐文章于 2024-06-01 12:25:44 发布
最新推荐文章于 2024-06-01 12:25:44 发布
阅读量6.2k 收藏 10
点赞数 5
分类专栏： 前端基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40935723/article/details/105880218
版权
本文介绍了一种在React开发中遇到的跨域问题及其解决方案。作者在使用VisualStudioCode进行React学习时，发现通过file协议打开html文件会导致Chrome浏览器认为自定义js请求为跨域，从而引发加载失败的问题。文章详细描述了如何通过安装并配置LiveServer插件，将项目运行在本地服务器上，从而避免跨域问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

最近这几天开学React前端框架，然后就在B站找到了一个入门视频，开始了学习，在React学习视频中，我看那个老师使用的是Visual Studio Code来写前端代码，于是我就立刻下载了Visual Studio Code，但是在这个学习视频中，我发现老师直接打开html文件居然是localhost的，而我自己打开的file，这个开始我并没有在意，但是在后面学习的过程中，我遇到了一个问题，就是在用react是引入自己写的js的时候，无法加载到chrome中，但是通过ie是可以加载的，于是各种百度，终于找到了问题，原来是通过file打开，对于chrome而言，它认为这个请求自定义的js是跨域的，然后网上的解决方式是将去加载到web容器中就可以解决这个问题，难受呀，于是就开始考虑怎么将它加载到web容器中，首先想到的是node js，然后失败，最后终于被我找到了Visual Studio Code有个插件就可以完美解决这个问题。

文章目录

解决方案

安装插件 Live Server
教程如下：
在这里插入图片描述
插件安装完成后我们就需要考虑如何用chrome打开(默认是IE)。

配置chrome打开页面

在这里插入图片描述
在这里插入图片描述

chrome打开

然后用Visual Studio Code打开html，然后右击Open with Live Server就可以了
在这里插入图片描述

使用node.js创建简易服务器，让本地HTML页面可以通过localhost访问
Senora的博客
05-26 1480
使用node.js创建简易服务器，让本地HTML页面可以通过localhost访问
html如何执行本地命令,关于javascript：如何在localhost上运行html文件？
weixin_31966453的博客
06-05 3158
我有一个HTML文件，并在本地主机上运行它。但是，这个文件包括使用网络摄像头的镜像。例如，如何在本地主机上运行此HTML文件？当选中"实时"复选框时，从本示例开始的网络摄像机。谢谢你的回复。可以在HTTP服务器中运行文件。1>在系统中安装node.js。2>在命令中，运行命令npm install http server-g3>导航到cmd中文件文件夹的特定路径并运行命令http...
VS Code 添加chrome调试及localhost 拒绝连接请求问题
lizz2276的博客
06-01 1477
二、打开活动栏上Debugger Run模块，点击create a launch.json 选择Chrome环境，如下图。3、默认launch.json，如下图 （Add Configuration...可添加新的配置）一、打开VS Code的EXTENSIONS，安装Debugger for Chrome，如下图。5、运行结果会出现无法访问此网站 localhost 拒绝连接请求问题，如下图。4、点击左边绿色按钮运行项目，项目代码及运行后界面如下图。
VSCode通过LocalHost打开html文件
wqsbenren的博客
07-13 9584
首先安装上图的插件，接着如下图右键HTML文件选择Open with Live Server即可
在localhost上运行html文件
m0_37714008的博客
07-01 3705
安装node.js 在powershell窗口中, 运行命令npm install -g http-server 导航到cmd中文件文件夹的特定路径并运行命令http-server-p${your-port}./ node 运行命令node./server/index.js 当前server下的文件
将本地html文件运行到本地服务器localhost上
m-dididid的博客
04-23 4900
下载http-server npm i -g http-server 在html文件目录下运行 http-server 然后就能看到可以在本地服务器打开 而不是file下
使用node.js创建一个简易服务器，让本地的HTML页面可以通过localhost方式访问
JiangLittleBai的博客
09-28 4154
最近一直在复习当中，所以会一写 HTML/js什么的。但是都是通过file:///Users/baiyinyu/Documents/privateProgram/test/918.html的方式去查看执行结果的。 。。。。 看起来丑不说， 其他电脑上也不能访问这个。。。 也不能在手机上访问这个页面。。。。。。。。。 就在想啊，本地的vue项目为什么可以通过localhost:port的方法访问了， 怎么做才能实现这个效果呢？ 这时候我们的node.js就派上用场了。。。。。 注：这篇文章只实现了最简单最基础
VS Code 快捷打开(localhost)PHP页面
Web_chicken的博客
11-22 3830
VS Code 快捷打开localhost 1.下载插件 记住是貌似与篮球的这么个玩意 2.配置环境 点击设置按钮 然后弹出来对话框 对话框中点击设置 然后点击拓展 3.配置域名 找到刚才现在的插件 在里边的Folder里输入你phpstudy_Pro中的www目录即可 他会根据你的文件名自动打开文件 4.成品 ...
Visual Studio Code 导入一个项目在本地启动
热门推荐
weixin_38168728的博客
08-08 1万+
1.打开项目在本地的包 File---Open Floder 2.修改.env.development文件的VUE_APP_API_BASE_URL=//localhost:8001 3.npm install 4.npm run dev 转载于:https://www.cnblogs.com/caoerxuan/p/11320845.html...
VScode里像webstorm一样在localhost打开页面的方法
JasonWuuu的博客
02-26 9389
VScode里像webstorm一样在localhost打开页面的方法 今天在vscode里写html引入js和less之后直接打开发现并不能正常显示，还报了Access to XMLHttpRequest at ‘file:///Users/…’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests a...
localhost访问本地html页面慢&localhost 解析为::1 的解决办法
lonelyVM的博客
10-10 2280
自己在用springboot写一个博客的时候，突然有一天项目启动后，html页面访问的速度特别慢。而且浏览器打开本地的html文件都变得很慢啦。 发现 电脑在ping locahost 的时候，对应的不是127.0.0.1的地址，而是ipv6.（localhost 解析为::1）于是按照这个：博客 修改了注册表，也重新设置了一下ipv4和v6的优先级，发现还是不行。 于是换了不同的电脑试试打开本地html文件的速度，发现有一台开了“集装箱”插件的chrome可以正常打开。 自己本地也打开这个插件，确实有用，
Visual Studio发布项目只能使用localhost问题解决
爱软件-从懂得生活开始。
09-05 2839
默认在调试项目的时候,Visual Studio默认配置的是只支持使用localhost进行配置,这样就造成了我们只能使用本机测试,其他人是无法参与测试的,所以为了解决这个问题,我么需要修改一下项目的配置,进入到项目的根目录,找到项目的配置文件,路径为: .vs\WebApplication\config\applicationhost.config 打开配置文件,找到site节点,修改bi...
BUU_crypto刷题记录1
weixin_44617902的博客
10-18 694
目录1.RSA2.RSA13.RSA24.RSA3 1.RSA 打开解压包得到两个如下文件 有（.key）文件说明与rsa模块有关可以用RSA模块直接得出n,e也可以在线解密key文件 网站： http://tool.chacuo.net/cryptrsakeyparse 分解pub.key代码： from Crypto.PublicKey import RSA from numpy import long public = RSA.importKey(open('pub.key').read())
（转）mac上使用http访问本地html
CaseyWei
10-20 883
场景：需要测试一个静态页面不同手机兼容性，需要通过局域网通过http访问mac上的html。
打开chm文件c语言,chm格式,手把手教你chm文件怎么打开
weixin_35805055的博客
05-23 5094
电脑用户在首次接触chm文件的时候一定很抓狂，Unbelievable！其实chm文件是系统帮助文件，细心会发现在许多软件中附带的说明也是chm文件格式，那什么软件可以打开chm呢？下面，小编跟大家带来了打开chm文件的图文。在平时的工作中，我们常常会去下载一些资料，有些资料是.CHM格式的，因此有很多用户不知道CHM文件怎么打开，那么CHM文件怎么打开呢？下面，小编给大家分享打开chm文件的经验...
pc端用localhost:本地IP打开页面
weixin_34185364的博客
04-12 964
2019独角兽企业重金招聘Python工程师标准>>> ...
vscode启动local_1分钟将vscode撸成小霸王
weixin_39962153的博客
02-02 341
今天给大家分享一下自己最近撸的一款vscode游戏插件，基于vscode的休闲放松利器。前言开始会先介绍该插件的安装使用方式，然后简单介绍下主要的开发步骤。安装&运行安装和其他的vscode插件一样，直接在插件市场搜索 ‘小霸王’ 点击安装即可。 安装完成后，再vsocde左侧左侧面板会有插件入口，点击即可进入游戏列表界面 点击local里面的游戏图标即可运行，启动游戏 remote部分是...
studio python 格式快捷键_Visual Studio Code在python中的使用
weixin_39895181的博客
11-24 440
Visual Studio Code是一个带GUI的代码编辑器。目前市场上比较常见的一些GUI编辑器的产品：Sublime、Notepad++、Atom、H5 Builder、Brackets等等，包括终端下的Vim、Emacs等等，都是这个vscode的竞品。我主要跑一些python的代码，IDE一直用的是pycharm，最近重装系统，深刻感受到pycharm的笨重，导入Anaconda都用了2...
解决VS Code调试html页面无法访问此网站 localhost 拒绝了我们的连接请求
weixin_47205539的博客
10-11 2270
安装提示This User Installer is not meant to be run as an Administrator问题 VSCode调试JavaScript报错：“crbug/1173575,non-JSmodulefilesdeprecated” 都是一样的，安装在C盘就行了，安装在D盘没权限
在Visual Studio Code中html连接MySQL的代码
最新发布
06-06
在Visual Studio Code中连接MySQL的代码一般需要使用Node.js和相关的MySQL包来实现。以下是一个简单的示例代码： ```javascript const mysql = require('mysql'); // 创建连接 const connection = mysql.create...
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值