VUE axios发送跨域请求需要注意的问题
更新时间：2017年07月06日 14:09:20 作者：diamonds_A
本篇文章主要介绍了VUE axios发送跨域请求需要注意的问题，在实际项目中前端使用到vue，后端使用php进行开发。前端使用axios请求请求遇到的问题，有兴趣的可以了解一下
在实际项目中前端使用到vue，后端使用php进行开发。前端使用axios请求请求
关于跨域
跨域的概念这些就不说了，百度一大堆相关的资料信息。我就只在这里记录下我在使用当中遇到的问题，以纪念在逝去的几个小时中资料查找的艰辛。
不多说，直接上代码~~~~
同理，跨域的解决方案为cros。服务器 PHP端代码如下(laravel 中间件进行处理)：
public function handle($request, Closure $next)
{
if ($request->isMethod('OPTIONS')) {
$response = response('', 200);
} else {
$response = $next($request);
}
if (!method_exists($response, 'header')) {
return $response;
}
$response->header('Access-Control-Allow-Methods', 'HEAD, GET, POST, PUT, PATCH, DELETE, OPTIONS');
$response->header(
'Access-Control-Allow-Headers',
'Content-Type, Content-Length, Authorization, Accept, X-Requested-With, Token'
);
$response->header('Access-Control-Allow-Origin', '*');
$response->header('Access-Control-Max-Age', 86400);
return $response;
}
Vue端 axios 请求：
axios.post('http://XXXX.com',{name:'test'});
这样写，在请求的时候就会遇到：
很坑爹有没有？明明是已经设置好了的啊，为毛是这样？？？
查找了很多资料才发现，axios在发送数据时需要字符串的方式进行发送，也就是说是放在form-data当中的。在实际项目中，为了方便，我引入了 qs 来帮助处理这块数据：
解决后的代码应该是：
import qs from 'qs';
axios.post('http://xxxxx.com',qs.stringify({name:'test'})).then(re=>{
console.log(re);
});
OK,问题解决。明明感觉很简单，但是就是因为自己不懂，导致找了很久才知道原因，之前一直在折腾后台的设置，忽略了前端本身的处理。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue中如何获取当前路由地址，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
在vsCode中书写Vue页面时无法提示,那真是很郁闷的事情,下面这篇文章主要给大家介绍了关于vsCode中vue文件无法提示html标签的操作方法,需要的朋友可以参考下2023-03-03
这篇文章主要为大家介绍了axios拦截器工作原理源码解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
这篇文章主要介绍了Vue双向数据绑定的原理，帮助大家更好的理解和学习vue，感兴趣的朋友可以了解下2020-10-10
这篇文章主要介绍了Vue3如何获取来源路由问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
这篇文章主要介绍了vue如何使用formData传递文件类型的数据问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
keepalive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染，也就是所谓的组件缓存，这篇文章主要介绍了说说你对Vue的keep-alive的理解,需要的朋友可以参考下2022-11-11
Vue.js提供了简洁、易于理解的API，帮助大家快速灵活掌握Vue.js。这篇文章主要介绍了如何在60分钟内轻松学习Vue.js，感兴趣的小伙伴们可以参考一下2016-11-11
这篇文章主要介绍了Proxy代理对象详解,Proxy 是ES6中提供的一个非常强大的功能，可以用来代理另一个对象，从而拦截、监视并修改这个对象的各种操作,需要的朋友可以参考下2023-04-04
解决vue-cli3创建使用iview定制主题javascriptEnabled找不到该配置项
这篇文章主要介绍了解决vue-cli3创建使用iview定制主题javascriptEnabled找不到该配置项问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
最新评论