VUE 前后台分离处理（继续之前的项目，这段时间我被上头抓走了）

距离上次 vue全家桶构建大型系统第一天配置处理记录一文开始不知道已经过去多久了，前面我们说到vue怎么保存登录状态（vuex + axios 做登录验证并且保存登录状态），前面用到的模拟数据json-server临时方式获取数据方式我们就不用了。

今天正式开始，与后台ThinkPHP 分离交互。懂一点的都知道，前后台分离首先就是要处理跨域请求，这是个简单而且蛋疼的事情。无非就是两种：1、前端处理 2、后台处理

前端处理

普通的Ajax 使用恶心的JSONP（缺点：只能实现get一种请求。）

$.ajax({
    url: 'http://www.xxx/login',
    type: 'get',
    dataType: 'jsonp',  // 请求方式为jsonp
    jsonpCallback: "onBack",    // 自定义回调函数名
    data: {}
});

vue 里面JSONP处理

this.$http.jsonp('http://www.xxx/login', {
    params: {},
    jsonp: 'onBack'
}).then((res) => {
    console.log(res); 
})

这里我就不说什么鬼原理，说了你记得吗，反正我不记得，写代码实用最好，我不喜欢前端处理跨域，很low，感觉在写小学代码意向，个人感觉，不喜勿喷。

后台处理（以PHP为例，其他的我也没研究啊）

首先在入口文件配置

if($_SERVER['REQUEST_METHOD'] == 'OPTIONS'){
    header("Access-Control-Allow-Origin: *");
    header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Authorization");
    header('Access-Control-Allow-Methods: GET, POST, PUT,DELETE,OPTIONS,PATCH');
    exit;
}

每个php框架的配置大同小异,在路口文件加就可以了

第二配置接口文件

// 指定允许其他域名访问
header('Access-Control-Allow-Origin:http://127.0.0.1:8080');
// 响应类型
header('Access-Control-Allow-Methods:GET,POST');
// 响应头设置
header('Access-Control-Allow-Headers:X-Requested-With, Content-Type');

不要问我什么意思，想知道自行百度，说多了你也不看。

现在我们来分析一下后台处理在入口文件加if判断的原因

服务端开启跨域（就是上面第二步），就能跨域请求没有错，可是前端请求接口的时候，发送一次请求，会有发送两次请求数据

这个 OPTIONS 可以说是一个“预请求”，用于探测后续真正需要发起的跨域 POST 请求对于服务器来说是否是安全可接受的，因为跨域提交数据对于服务器来说可能存在很大的安全问题。

一般情况下我们并不用理会这个请求，可是有些情况下huig会给我们带来一定麻烦，比如：注册接口没有处理空数据的情况下，就会注册一条空数据进入。（所以就要在入口文件做一下统一处理）

至此，我们前后台分离的项目框架就搭建完了。如果你想看在线案例，哇哇哇~~~我没有服务器啊。正在筹划中，你也可以支持一下。

VUE 前后台分离 处理（继续之前的项目，这段时间我被上头抓走了）

猜你喜欢

VUE 前后台分离处理（继续之前的项目，这段时间我被上头抓走了）