vue-cli生成的项目proxyTable的解决跨域
proxyTable作用是为了让我们配置url,去访问服务器的,为什么我们通过vue-cli(vueinit webpack myprioject)生成的项目通过 npm run dev就能运行,是因为我们的项目集成了webpack,webpack集成了webpackserver,webpack server是一个服务器,通过npmrun dev就能启动webpack server,我们的前端文件
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请求数据
更多推荐
所有评论(0)