Vue前端跨域问题

引言

作为一名后端工程师，之前处理过对vue的跨域处理，使用的是后端的处理方法，当时是知道前端对跨域问题处理(代码层面)，就一直不知道怎么处理。今天学习到了前端这个跨域问题的前端处理方法，记录下来。

一. 问题描述

1.1后台接口的api地址

http://localhost:31001/cms/page/list/1/2

1.2前端代码

1.3 webpack 运行端口

1.4 页面发起请求

1.5 请求响应

1.6 报错信息

二 . 问题

可以明显的看到浏览器提示出现了跨域问题 原因是浏览器无法处理由于跨域请求响应的数据
至于浏览器为什么无法处理这个数据,这个涉及到浏览器的同源策略,就不做过多解释了

三 解决办法:proxyTable

3.1 proxyTable

proxyTable是什么？
vue-cli提供的解决vue开发环境下跨域问题的方法，proxyTable的底层使用了http-proxy- middleware（https://github.com/chimurai/http-proxy-middleware），它是http代理中间件，它依赖node.js， 基本原理是用服务端代理解决浏览器跨域：

3.2 代码

webpack 的配置文件

对发起请求的代码修改 成对 以指定的连接开头 入上面的/api 开口的

3.2 页面结果

ok !!!

总结

在使用proxyTable 代理后我们修改了请求的地址为api 开头的 在 被解析后 (配置文件) ,就会自动的转发到31001 这个端口 并且把"api" 替换成空串 proxyTable 也是一个运行在node.js上面的程序 他会代替我们的浏览器去访问31001 接口拿到数据 然后数据在返回给浏览器,至于为什么代理proxyTable 可以拿到数据 就是因为 跨域是对服务器于浏览器之间的 对于服务端之间是没有限制的 .