我是靠谱客的博主 隐形书包,最近开发中收集的这篇文章主要介绍【技术工具】用VsCode扩展插件Live Server设置服务端代理不用Nginx做服务端代理也能解决跨域问题跨域问题VSCode 插件Live Server代理设置,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

跨域问题

也就是俗称的前端与后端交互需要同源策略,即如下:

域:服务器域名,唯一标识(协议,域名,端口)必须保证一致,说明域相同

跨域:在一个服务器上,去访问另一个服务器上,并且得到另一个服务器返回回来的值,这就是javascript跨域,其实简单点,之前我们做的ajax,都是在同域中访问,现在只是访问的服务器变成了另外的,不是同一台了。仅此而已。但是这样一变,之前的代码就不能用了。

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

VSCode 插件Live Server代理设置

Live Server扩展的设置,可以进入设置界面设置,也可以手动设置settings.json,内容如下:

{
    "liveServer.settings.host": "localhost", //域名或IP

    "liveServer.settings.port": 5500,       //默认端口

    "liveServer.settings.wait": 1000,       //刷新频率

    "liveServer.settings.CustomBrowser": "chrome",  //打开到目标浏览器

    "liveServer.settings.ChromeDebuggingAttachment": false, //是否开启ChromeDebug

    "liveServer.settings.proxy": {  //代理设置

        "enable": true, //是否开启代理设置 

        "baseUri": "/api", //代理的访问根路径,如http://localhost:5500/api

        "proxyUri": "http://www.xxxx.com:8080/api" //远程服务端接口

    }

}

设置完后,重启 LiveServer 后,在浏览器输入 http://localhost:5500/api 会被代理到http://www.xxxx.com:8080/api 接口上,如果代码服务器不可访问,LiveServer 就会忽略proxy属性,以默认的方式打开。通过这个方式,你可直接挂载工程目录到对应的tomcat、jetty、iis、php-fpm等后端目录进行处理。

最后

以上就是隐形书包为你收集整理的【技术工具】用VsCode扩展插件Live Server设置服务端代理不用Nginx做服务端代理也能解决跨域问题跨域问题VSCode 插件Live Server代理设置的全部内容,希望文章能够帮你解决【技术工具】用VsCode扩展插件Live Server设置服务端代理不用Nginx做服务端代理也能解决跨域问题跨域问题VSCode 插件Live Server代理设置所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(43)

评论列表共有 0 条评论

立即
投稿
返回
顶部