live-server 配置 proxy 小白踩坑总结

小白踩坑经历分享，大神莫嘲笑。

        项目开发中想使用live-server配置个代理服务免去在本地搭建后台环境，在网上找了很多live-server的文章看过后一直没有配置成功，后来终于找到了问题的根源，以下是配置截图：

package.json

{
  ...
  "scripts": {
    "start": "live-server --host=localhost --port=8081 --proxy=/alloverview:http://192.168.1.107:8080/alloverview"
  }
  ...
}

test.js

$.ajax({
	type: 'POST',
	url: '/alloverview/intelligent/staffLocation',
	success(response) {
		// do something ...
	}
});

        这里配置proxy一定要注意，因为网上多数文档都没写到，导致我尝试了很多次都失败，一度认为live-server的代理请求是假的。

        这里说一下–proxy=/alloverview:http://192.168.1.107:8080/alloverview这个配置，刚开始我只在/alloverview后面配置了http://192.168.1.107:8080，想着只要把以/alloverview开头的请求代理到这个IP下就万事大吉了，理想中的结果是请求到了http://192.168.1.107:8080/alloverview/intelligent/staffLocation，结果却一直是404，可能是自己太菜了才会遇到这种问题。后来发现一定要把/alloverview配置到代理地址后面，这样就能顺利的找到需要代理的接口地址返回数据。通过以上配置后在代码根目录下打开终端执行npm -start就能顺利启动服务并请求后台接口了，踩过坑后发现原来就这么简单。这样项目组所有前端开发都可以去请求同一台服务器开发代码了。

        另外在提一点是如果后台服务设置了IP过滤一定要让后台的同事把自己的IP配置进去，不然请求会报403错误，你的请求被拒绝了，亲测后台按照package.json中配置localhost:8081地址就可以请求通，不必配置每一个人的具体IP。

        个人感觉live-server真的是开发神气，启动快、自带热加载、方便配置代理，结合VS Code极度适合jQuery多页面应用的开发。