vue-cli生成的项目proxyTable的解决跨域

proxyTable作用是为了让我们配置url,去访问服务器的,为什么我们通过vue-cli(vueinit webpack myprioject)生成的项目通过 npm run dev就能运行,是因为我们的项目集成了webpack,webpack集成了webpackserver,webpack server是一个服务器,通过npmrun dev就能启动webpack server,我们的前端文件就能通过这个端口被浏览器访问到,就是说webpack server自身维护着一个服务器,托管这我们的前端代码,他有自己的端口,比如8080(默认,可以再配置文件里面修改),然后我们后台的服务器端口是8003,这样,我们页面上想去访问8003的接口就会有跨域的问题,这个是毋庸置疑的,为了在开发前端的时候能够去访问后台的接口,目前我能想到的只有三条路,

1、后台服务器允许来自前端服务的数据请求

2、配置nginx,反向代理后台的服务器,解决跨域

3、前端通过代理去访问后台,这个代理的配置就是webpack.config.js(不一定非要是这个文件,webpack默认配置文件是根目录下面的webpack.config.js文件,你也可以指定其他的文件)


我红线框出来的部分其实是定义在另一个文件中的对象,被该文件import进来罢了,这样写只是为了让结构更加清晰,另一个文件中对proxyTable的配置就是我们想去访问的真正的后台服务器,具体配置如下,当我访问weekly的时候,URL会自动去8003端口下请求数据,localhost:8080/weekly/user/list其实就是去找localhost:8003/user/list请求数据

 


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值