vue+laravel+passport跨域的問題

使用laravel做API，passport認(rèn)證，vue做client。在postman中能夠正常獲取數(shù)據(jù)，在vue中報(bào)錯Access-Control-Allow-Origin

下面是我的代碼
laravel AuthServiceProvider.php

public function boot()
    {
        $this->registerPolicies();

        // 配置passport路由
        Passport::routes(null,['prefix'=>'api/oauth','middleware'=>'acc.h']);
    }

laravel acc.h中間件

public function handle($request, Closure $next)
    {
        header("Access-Control-Allow-Origin:*");
        return $next($request);
    }

php artisan route:list部分截圖
圖片描述

vue js script

     axios({
        method: 'post',
        url: '/oauth/token', // main.js中已經(jīng)設(shè)置了全局的baseURL
        data: {
          client_id: '2',
          client_secret: 'kCvv28qy25rIw5IYvAwpIHNQvBMnH6FElrzxqvqP',
          username: 'user1@api.test',
          password: '111111',
          grant_type: 'password'
        }
      })
        .then(response => {
          console.log(response.data)
        })

在postman中測試截圖
圖片描述

在chrome中測試vue的截圖
圖片描述

回答

編輯回答

疚幼

附帶身份憑證的請求與通配符對于附帶身份憑證的請求，服務(wù)器不得設(shè)置 Access-Control-Allow-Origin 的值為“*”。
這是因?yàn)檎埱蟮氖撞恐袛y帶了 Cookie 信息，如果 Access-Control-Allow-Origin
的值為“*”，請求將會失敗。而將 Access-Control-Allow-Origin 的值設(shè)置為
http://foo.example，則請求將成功執(zhí)行。
來自mdn

所以把*改成你的請求域名http://localhost:8080

如果還不行，

Access-Control-Allow-Credentials: true
Access-Control-Allow-Methods: *

這些字段也都設(shè)置一下

2017年6月16日 18:38

編輯回答

冷眸

問題終于解決了?。?！

使用各種方法，搗鼓了兩天，最后使用jquery的POST與axios進(jìn)行對比，才發(fā)現(xiàn)原來默認(rèn)情況下，axios將JavaScript對象序列化為JSON。

看文檔很重要！！axios只是粗略的看了下前面的選項(xiàng)配置，后面部分忽略了，才導(dǎo)致在這個(gè)問題上卡了很長的時(shí)間。

廢話少說了，繼續(xù)！

要發(fā)送數(shù)據(jù)到服務(wù)器必須把json格式化為字符串。參見axios的Using application/x-www-form-urlencoded format

直接貼個(gè)解決方法：

首先，服務(wù)器上的Access-Control-Allow-Origin還是需要的
然后就是使用axios的推薦解決方法，安裝qs

npm install qs --save-dev

引入qs

import qs from 'qs'

使用qs.stringify(data)對要發(fā)送的數(shù)據(jù)進(jìn)行格式化

axios(
    {
        data: qs.stringify(
            {
                client_id: '2',
                ...
            }
        )
        ...
    }
)

另外，很感謝樓上兩位碼友的幫忙??！

2018年3月11日 14:27

編輯回答

安于心

axios在請求跨域接口時(shí), 加上withCredentials參數(shù), 然后在響應(yīng)的header中加上:Access-Control-Allow-Credentials: true和Access-Control-Allow-Methods: *還有Access-Control-Allow-Origin:*

2017年2月14日 16:27