上线路径不能写死,相对路径用代理,以及json-server的跨域问题
上线路径不能写死,相对路径用代理
将路径写死let url='http://localhost:3333/jobslist';//这个是模拟数据的地址
能拿到数据,但是项目上线是不能写成绝对路径的,
那么办法是,有一个相对路径,为了能拿到数据,配置一个代理http-proxy-middleware
在gulpfile.js
里面(http-proxy-middleware 代理插件),
然后在使用代理的地方使用相对路径let url='/api/jobslist';
而实际执行过程中,'/api'
会被替换成''
,所以就达到一个代理效果,同样可以访问数据了。
简单过程:
用gulp-webserver来配置代理(因为我们用的是gulp-webserver服务)
https://www.npmjs.com/package/gulp-webserver,然后gulp-webserver里的一个选项参数middleware (中间件),其实就是一个代理:
http-proxy-middleware 代理插件,通过代理的方式,把数据拿到。
为什么端口号不一样,还能直接拿到数据?
说明能跨域,是因为json-sever自动加了请求头,里面有允许跨域的设置: