vue+laravel+passport跨域的问题

Question

使用laravel做API，passport认证，vue做client。在postman中能够正常获取数据，在vue中报错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中已经设置了全局的baseURL
        data: {
          client_id: '2',
          client_secret: 'kCvv28qy25rIw5IYvAwpIHNQvBMnH6FElrzxqvqP',
          username: '[e-mail]',
          password: '111111',
          grant_type: 'password'
        }
      })
        .then(response => {
          console.log(response.data)
        })

在postman中测试截图

在chrome中测试vue的截图

Answer 1

问题终于解决了！！！

使用各种方法，捣鼓了两天，最后使用jquery的POST与axios进行对比，才发现原来默认情况下，axios将JavaScript对象序列化为JSON。

看文档很重要！！axios只是粗略的看了下前面的选项配置，后面部分忽略了，才导致在这个问题上卡了很长的时间。

废话少说了，继续！

要发送数据到服务器必须把json格式化为字符串。参见axios的Using application/x-www-form-urlencoded format

直接贴个解决方法：

首先，服务器上的Access-Control-Allow-Origin还是需要的
然后就是使用axios的推荐解决方法，安装qs

npm install qs --save-dev

引入qs

import qs from 'qs'

使用qs.stringify(data)对要发送的数据进行格式化

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

另外，很感谢楼上两位码友的帮忙！！

Answer 2

附带身份凭证的请求与通配符 对于附带身份凭证的请求，服务器不得设置 Access-Control-Allow-Origin 的值为“*”。
这是因为请求的首部中携带了 Cookie 信息，如果 Access-Control-Allow-Origin
的值为“*”，请求将会失败。而将 Access-Control-Allow-Origin 的值设置为
http://foo.example，则请求将成功执行。
来自mdn

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

如果还不行，

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

这些字段也都设置一下

Answer 3

axios在请求跨域接口时, 加上withCredentials参数, 然后在响应的header中加上:Access-Control-Allow-Credentials: true和Access-Control-Allow-Methods: *还有Access-Control-Allow-Origin:*