使用 Laravel 5.5 发布 Axios 请求答案

【问题标题】：POST Axios request using Laravel 5.5使用 Laravel 5.5 发布 Axios 请求
【发布时间】：2018-06-27 20:19:47
【问题描述】：

我目前正在使用 Laravel@5.5 与 Redis、laravel-echo-server 和 Axios，并尝试制作实时聊天功能。
我没有使用vue.js 作为前端框架。

我在使用 axios 和 jquery 发出 POST 请求时遇到了一些问题，这是：

-> echo.js 
 $('#submit').click(function() {
 var content = $('#content').val();    
 axios.post('/api/conversation/update', {   
 content: content });  
});


-> api.php
    Route::post('/conversation/update', 'ConversationController@update');


-> bootstrap.js
   /**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';


/**
 * Next we will register the CSRF Token as a common header with Axios so that
 * all outgoing HTTP requests automatically have it attached. This is just
 * a simple convenience so we don't have to attach every token manually.
 */

let token = document.head.querySelector('meta[name="csrf-token"]');

if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}

输出这个：

POST http://localhost:8000/api/conversation/update 401（未经授权）
未捕获（承诺）错误：请求失败，状态码为 401

我已经做了很多尝试和研究，即使是Laravel Passport，也没有看到我卡在哪里。

亲切的问候，
JeuneApprenti.

【问题讨论】：

您的/api 路由使用auth:api 保护。所以你必须有护照提供的令牌才能工作。向我们展示您的护照配置？

标签： laravel redis axios php-7 laravel-echo

【解决方案1】：

如果有人真的需要那里的答案，我终于用 axios 换了简单的fetch 方法并设置了一个socket.io-client

看起来像这样：

-> echo.js   
const fetchApi = async function (url, options = {}) {
  let response = await fetch(url, {
    credentials: 'same-origin',
    headers: {
      'X-Requested-With': 'XMLHttpRequest',
      'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
      'Acccept': 'application/json',
      'Content-Type': 'application/json',
      'X-Socket-ID': Echo.socketId(),
    },
    ...options
  })
  if (response.ok) {
    return response.json()
  } else {
    throw await response.json()
  }
}

-> api.php

Route::group(['middleware' => ['auth:api']], function () {
  Route::get('/conversations', 'Api\ConversationController@index');
  Route::get('/conversations/{user}', 'Api\ConversationController@show')   
   ->middleware('can:talkTo,user');
  Route::post('/conversations/{user}', 'Api\ConversationController@store') 
   ->middleware('can:talkTo,user');
});

-> bootstrap.js

import Echo from 'laravel-echo'

window.Echo = new Echo({
  broadcaster: 'socket.io',
  host: window.location.hostname + ':6001',
});
window.io = require('socket.io-client');

然后，您可以在视图中调用此脚本以通过 socket.io 从 websockets 获取数据：

<script src="//{{ Request::getHost() }}:6001/socket.io/socket.io.js"></script>

【讨论】：