Axios 在 Laravel 中重复前缀路由答案

【问题标题】：Axios is repeating prefix route in LaravelAxios 在 Laravel 中重复前缀路由
【发布时间】：2020-03-15 15:35:13
【问题描述】：

不知道为什么在我尝试请愿的时候，axios没有很好的获取路由。

错误： 然后这里是错误，我有一个 operations.js 在那里我向路由 operation_calls 发布 axios 帖子，如下所示，但我不知道为什么 axios 不只获取 url我写了，重复了两次。

const operacionLlamadasApp = new Vue({
    el: '.crud-operation-calls',
    methods:{
        storeOperations(){
            // as you see I only write it once and I expect to go there
            axios.post('operation_calls', {
                  param1 : param1,
                  param2 : param1
            })
            .then(response =>{

            })
        }
    }
});

当在浏览器中我在这个 url 中时，创建一个新行：http://my-domain/operation_calls/create 并单击保存按钮，我希望转到 operation_calls 存储路径，但我收到此错误：

Request URL: http://my-domain/operation_calls/operation_calls
Request Method: POST
Status Code: 405 Method Not Allowed

如您所见，前缀在我只输入一次时重复。

我的浏览器控制台的response 也有这个错误：

The POST method is not supported for this route. Supported methods: PUT

我正在使用：

Laravel 6.*
Axios: ^0.19

我已经创建了这样的路线：

Route::group(['prefix' => 'operation_calls'], function(){
    Route::put('/{id}','OperationsCallController@update');
    Route::resource('/','OperationsCallController', ['names' => [
        'create' => 'operations.create']
    ]);
});

基本上，我有这样的路线：

GET|HEAD     operation_calls            index
POST         operation_calls            store
GET|HEAD     operation_calls/create     create
PUT          operation_calls/{id}       update

这是我制作 post 方法的方式，在我的 blade.php 我有这个表格：

<div class="crud-operation-calls">
   <form role="form" method="POST" v-on:submit.prevent="storeOperations()">
    @csrf
     ...
   </form>
</div>

另外，我只发了一个这样的 axios 帖子：

    axios.post('', {
          param1 : param1,
          param2 : param1
    })
    .then(response =>{

    })

这就是我得到的：

Request URL: http://my-domain/operation_calls/create
Request Method: POST
Status Code: 405 Method Not Allowed

我不知道我做错了什么。就像传递当前页面的前缀一样。但我认为 axios 应该去我在它的参数中写的路线。 为什么会改变？

我尝试了什么：

清除laravel的路由缓存：php artisan route:cache 清除浏览器缓存我的.env 文件很好APP_URL=http://my-domain/，因为它可以与其他网址一起使用。

【问题讨论】：

标签： laravel axios

【解决方案1】：

只需像这样在您的路线前面加上 /

 axios.post('/operation_calls', {
                  param1 : param1,
                  param2 : param1
            })
            .then(response =>{

            })

【讨论】：

它工作得很好，谢谢，我没有注意到我一直只是在没有/ 的情况下进行路由，并且工作正常。现在我很害怕，我想我必须总是使用/：/

【解决方案2】：

我认为您是直接从http://my-domain/operation_calls/create 发帖的。所以它假设相对 URL 在那里附加了额外的 URI。试试

  axios.post('{{ route('operation_calls.store') }}', {
              param1 : param1,
              param2 : param1
        })
        .then(response =>{

        })

另外，删除 <form>，因为我们是通过 VUE 发布的，不需要额外的 FORM 来发布。使用可以更改为<form> to <div>. Vue post() 中也不要忘记传递 CSRF 令牌

【讨论】：

感谢您的回答，但 {{ route() }} 在外部 javascript 文件中不起作用，它被视为字符串。感谢您的建议，我是 Vue 新手