VUE axios發(fā)送跨域請求需要注意的問題

更新時間：2017年07月06日 14:09:20 作者：diamonds_A

本篇文章主要介紹了VUE axios發(fā)送跨域請求需要注意的問題，在實際項目中前端使用到vue，后端使用php進行開發(fā)。前端使用axios請求請求遇到的問題，有興趣的可以了解一下

在實際項目中前端使用到vue，后端使用php進行開發(fā)。前端使用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'});

這樣寫，在請求的時候就會遇到：

很坑爹有沒有？明明是已經(jīng)設置好了的啊，為毛是這樣？？？

查找了很多資料才發(fā)現(xiàn)，axios在發(fā)送數(shù)據(jù)時需要字符串的方式進行發(fā)送，也就是說是放在form-data當中的。在實際項目中，為了方便，我引入了 qs 來幫助處理這塊數(shù)據(jù)：

解決后的代碼應該是：

import qs from 'qs';
axios.post('http://xxxxx.com',qs.stringify({name:'test'})).then(re=>{
  console.log(re);
});

OK,問題解決。明明感覺很簡單，但是就是因為自己不懂，導致找了很久才知道原因，之前一直在折騰后臺的設置，忽略了前端本身的處理。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

VUE
axios

vue3+typescript實現(xiàn)圖片懶加載插件
這篇文章主要介紹了vue3+typescript實現(xiàn)圖片懶加載插件，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下
2020-10-10
Vue的指令中實現(xiàn)傳遞更多參數(shù)
這篇文章主要介紹了Vue的指令中實現(xiàn)傳遞更多參數(shù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-05-05
Vue Element前端應用開發(fā)之常規(guī)Element界面組件
在我們開發(fā)BS頁面的時候，往往需要了解常規(guī)界面組件的使用，小到最普通的單文本輸入框、多文本框、下拉列表，以及按鈕、圖片展示、彈出對話框、表單處理、條碼二維碼等等，本篇隨筆基于普通表格業(yè)務的展示錄入的場景介紹這些常規(guī)Element組件的使用
2021-05-05
Vue v-for中:key中item.id與Index使用的區(qū)別解析
這篇文章主要介紹了Vue v-for中:key中item.id與Index使用的區(qū)別解析,推薦使用【:key="item.id"】而不是將數(shù)組下標當做唯一標識,前者能做到全部復用,本文給大家詳細講解,感興趣的朋友跟隨小編一起看看吧
2024-02-02
vantUI 獲得piker選中值的自定義ID操作
這篇文章主要介紹了vantUI 獲得piker選中值的自定義ID操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-11-11
effect返回runner單測實現(xiàn)示例詳解
這篇文章主要為大家介紹了effect返回runner單測實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-12-12
Vue3中emits與attrs的區(qū)別分析
這篇文章主要給大家介紹了關于Vue3中emits與attrs區(qū)別的相關資料,文中通過示例代碼介紹的非常詳細,對大家學習或者使用vue具有一定的參考學習價值,需要的朋友可以參考下
2021-10-10
Vue中動畫與過渡的使用教程
最近在寫vue的一個項目要實現(xiàn)過渡的效果,雖然vue動畫不是強項,庫也多,但是基本的坑還是得踩扎實,下面這篇文章主要給大家介紹了關于Vue中實現(xiàn)過渡動畫效果的相關資料,需要的朋友可以參考下
2023-01-01
Vue3父子組件相互調(diào)用方法舉例詳解
這篇文章主要給大家介紹了關于Vue3父子組件相互調(diào)用方法的相關資料,vue中我們常常用到組件,那么組件中互相調(diào)用也是經(jīng)常遇到的,需要的朋友可以參考下
2023-08-08
使用Vue.js實現(xiàn)一個循環(huán)倒計時功能
在Web應用中,倒計時功能常用于各種場景,如活動倒計時、定時任務提醒等,Vue.js作為一款輕量級的前端框架,提供了豐富的工具和API來實現(xiàn)這些功能,本文將詳細介紹如何使用Vue.js實現(xiàn)一個循環(huán)倒計時功能,需要的朋友可以參考下
2024-09-09