【技术工具】用VsCode扩展插件Live Server设置服务端代理不用Nginx做服务端代理也能解决跨域问题

跨域问题

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

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

跨域：在一个服务器上，去访问另一个服务器上，并且得到另一个服务器返回回来的值，这就是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等后端目录进行处理。