码迷,mamicode.com
首页 > 移动开发 > 详细

解决vue axios跨域请求发送两次问题

时间:2020-01-09 16:01:29      阅读:291      评论:0      收藏:0      [点我收藏+]

标签:gem   public   request   php   img   问题:   java   load   file   

问题:

vue axios跨域请求,在Request HeadersAuthorization传递Token时,发现统一请求触发了两次,第一次是Request Method: OPTIONS请求。

原因:

跨域请求时,浏览器会首先使用OPTIONS方法发起一个预请求,判断接口是否能够正常通讯。如果通讯异常,则不会发送真正的请求,如果测试通讯正常,则开始真正的请求。

解决方法:

后台:判断请求方式是OPTIONS,则不处理;

 
技术图片
预请求

 
技术图片
发送真正请求

 PHP解决方法
class Common extends Controller
{
    public function _initialize()
    {
        parent::_initialize(); // TODO: Change the autogenerated stub
        // 解决跨域问题
        header(Access-Control-Allow-Origin:*);
        // 响应类型
        header(Access-Control-Allow-Methods:*);
        // 响应头设置
        header(Access-Control-Allow-Headers:*);

        // 解决 axios跨域请求发送两次问题
        if (Request::instance()->isOptions()) {
            exit();
        }
    }
}

 

后台对预请求不处理



如果是JAVA后台,请看这篇文章:https://www.cnblogs.com/itmrzhang/p/11003474.html

解决vue axios跨域请求发送两次问题

标签:gem   public   request   php   img   问题:   java   load   file   

原文地址:https://www.cnblogs.com/wordblog/p/12171875.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!