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

發(fā)布時(shí)間：2020-08-21 13:15:29 來源：腳本之家閱讀：163 作者：diamonds_A 欄目：web開發(fā)

在實(shí)際項(xiàng)目中前端使用到vue，后端使用php進(jìn)行開發(fā)。前端使用axios請(qǐng)求請(qǐng)求

關(guān)于跨域

跨域的概念這些就不說了，百度一大堆相關(guān)的資料信息。我就只在這里記錄下我在使用當(dāng)中遇到的問題，以紀(jì)念在逝去的幾個(gè)小時(shí)中資料查找的艱辛。

不多說，直接上代碼~~~~

同理，跨域的解決方案為cros。服務(wù)器 PHP端代碼如下(laravel 中間件進(jìn)行處理)：

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 請(qǐng)求：

axios.post('http://XXXX.com',{name:'test'});

這樣寫，在請(qǐng)求的時(shí)候就會(huì)遇到：

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

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

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

解決后的代碼應(yīng)該是：

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

OK,問題解決。明明感覺很簡(jiǎn)單，但是就是因?yàn)樽约翰欢?，?dǎo)致找了很久才知道原因，之前一直在折騰后臺(tái)的設(shè)置，忽略了前端本身的處理。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

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

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽