Can
Be Better

Vue异步请求组件Axios跨域解决

说实话,我作为一个后端万年使用Jquery真的没考虑过跨域问题,但是最近某个后台项目用了Vue,然后跨域的问题让我纠结了好久。然后知道了什么是简单请求什么是非简单请求。

然鹅,Axios这个默认的content-type是json,所以就成了非简单请求,然后每一次请求都会有一个options请求。

所以关于处理跨域问题可以从两个地方进行解决:1。前端把非简单请求变为简单请求;2。后端进行处理

先说说后端处理,我的做法是加一个options的路由,然后返回header设置,以PHP语言为例子:

header('Access-Control-Allow-Origin:*');//允许所有来源访问
header('Access-Control-Allow-Method:*');//允许访问的方式
header('Access-Control-Allow-Headers:*');//允许访问的方式
header('Access-Control-Expose-Headers:*');//允许访问的方式
header('Content-Type:application/json;charset=UTF-8');//允许访问的方式
header('Access-Control-Max-Age:30');//允许访问的方式

很麻烦啊,前端赶紧安排!!!

什么?!!我追踪到Axios到最后默认变成了json所以不能?!!那就直接动手改组件库的代码。。。虽然很不科学但是。。。

if (utils.isObject(data)) {
  // setContentTypeIfUnset(headers, 'application/json;charset=utf-8');
  // return JSON.stringify(data);
  setContentTypeIfUnset(headers, 'application/x-www-form-urlencoded;charset=utf-8');
  let keys2 = Object.keys(data);
  return encodeURI(keys2.map(name => `${name}=${data[name]}`).join('&'));
}

就这样后端就不用改了,完事

不开启评论,如有问题疑问请发邮件。i@ltq.im最长的路 » Vue异步请求组件Axios跨域解决