用VsCode扩展插件Live Server设置服务端代理解决跨域

最新推荐文章于 2025-02-03 16:47:46 发布

kong_b_a_i

最新推荐文章于 2025-02-03 16:47:46 发布

阅读量7.4k

点赞数 6

文章标签： vscode ide 编辑器

本文链接：https://blog.csdn.net/kong_b_a_i/article/details/127423475

版权

本文介绍了如何利用VSCode的LiveServer扩展来设置代理服务器，从而解决跨域问题，无需使用nginx。通过调整settings.json配置，开启代理设置，指定代理的访问根路径和远程服务端接口，可以将本地请求代理到远程接口，方便前端开发中进行接口联调。

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

解决跨域有几种方式，其中之一就是搭建代理服务器（nginx），让所访问域名、端口、路径相同。但我这里不想用nginx，则可以用VScode 的扩展插件Live Server简单实现。

VSCode 插件Live Server代理设置
Live Server扩展的设置，可以进入设置界面设置，也可以手动设置settings.json，内容如下：

{
    "liveServer.settings.host": "localhost", //域名或IP
 
    "liveServer.settings.port": 8080,       //默认端口
 
    "liveServer.settings.wait": 1000,       //刷新频率
 
    "liveServer.settings.CustomBrowser": "chrome",  //打开到目标浏览器
 
    "liveServer.settings.ChromeDebuggingAttachment": false, //是否开启ChromeDebug
 
    "liveServer.settings.proxy": {  //代理设置
 
        "enable": true, //是否开启代理设置 
 
        "baseUri": "/land", //代理的访问根路径，如http://localhost:5500/api
 
        "proxyUri": "http://47.103.60.208:9900" //远程服务端接口
 
    }
 
}

设置完后，重启 LiveServer 后，在浏览器输入 http://localhost:8080/api 会被代理到http://www.xxxx.com:99001/api 接口上，如果代码服务器不可访问，LiveServer 就会忽略proxy属性，以默认的方式打开。