解決vue axios跨域請求發送兩次問題

問題：

vue axios跨域請求，在Request Headers加Authorization傳遞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