为什么我的 Laravel 路由返回 404 错误？

Question

为什么我的 Laravel 路由返回 404 错误？

3

我正在尝试发送一种表单提交的 AJAX 请求，但是我尝试将数据发送到的 PHP 解析脚本返回了一个 404 错误，我可以通过 Chrome 开发者工具看到这个错误。这是我的代码：

<script type="text/javascript">

function ajax_post(){
    var hr = new XMLHttpRequest();
    var url = "/products/parse.blade.php";
    var productName = document.getElementById("productName").value;
    var quantityInStock = document.getElementById("quantityInStock").value;
    var pricePerItem = document.getElementById("pricePerItem").value;
    var totalValueNumber = quantityInStock * pricePerItem;
    var route = "productName="+productName;
    hr.open("POST", url, true);
    hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    hr.onreadystatechange = function() {
        if(hr.readyState == 4 && hr.status == 200) {
            var return_data = hr.responseText;
            document.getElementById("status").innerHTML = return_data;
        }
    }
    hr.send(route);
    document.getElementById("status").innerHTML = "processing...";
}

</script>

<div class="container-fluid form-container">
  <div class="row">
    <div class="col-lg-3 col-md-12">

            <div class="form-group">
                <input type="text" name="productName" id="productName" placeholder="Product Name" class="form-control" required>    
            </div>

            <div class="form-group">
                <input type="number" name="quantityInStock" id="quantityInStock" placeholder="Quantity in Stock" class="form-control" required> 
            </div>

            <div class="form-group">
                <input type="number" step="0.01" name="pricePerItem" id="pricePerItem" placeholder="Price per Item" class="form-control" required>  
            </div>

            <input type="submit" value="Create Product Listing" class="btn btn-primary" onclick="ajax_post();">

            <hr>
            <div id="status"></div>

    </div>
  </div>
</div>

我正在使用Laravel，而且这个视图products.create和我尝试使用解析数据的文件products.parse都在我的views文件夹中的products目录下。但是，当我尝试提交后，所有我得到的响应都只有状态div中的“processing”，并且在Chrome的开发控制台中对于路由mydevsite.dev/products/parse收到404错误。

我的想法是需要定义一个路由，因此我添加了以下内容：

Route::post('/products/parse', 'ProductController@parse');

返回什么值

return view('products.parse');

但是这只是将我的错误更改为419。我认为这与CSRF字段有关，但我不确定如何包含它，因为我的HTML不是一个表单，而只是具有表单元素。为什么我的路由会返回404或419错误，我该如何修复？

- develpr

2个回答

1

您正在访问错误的路由。此变量。

var url = "/products/parse.blade.php";

应该是这样的。

var url = "/products/parse";

你想调用此处定义的路由

Route::post('/products/parse', 'ProductController@parse');

您试图调用路由返回的 Blade 文件，这不是正确的方法。而且该文件不位于您的公共目录中。

您可以尝试使用fetch，代码会类似于：

document.getElementById("status").innerHTML = 'processing...'
let form = new FormData()

form.set('one', '1')
form.set('two', '2')

fetch(url, {
  method: 'POST',
  // Credentials may or may not be required. 
  // It depends if cookies are needed or not.
  credentials: 'include',
  body: form,
  headers: {
    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
  }
}).then(response => response.text())
  .then(text => {
    document.getElementById("status").innerHTML = text
  })

- Get Off My Lawn

@hoolakoola，你尝试过使用fetch吗？ - Get Off My Lawn

@GetOffMyLawn 使用原始 XHR 不会导致 419 错误 :) 正如我所说，CRRF token 的问题才是关键。 - Hamidreza Kalantari

@HamidrezaKalantari 看起来你是对的 https://dev59.com/9VYO5IYBdhLWcg3wBtIp - Get Off My Lawn

@HamidrezaKalantari 是的，那就是问题所在，我添加了 hr.setRequestHeader("X-CSRF-TOKEN", $('meta[name="csrf-token"]').attr('content')); 并解决了它。谢谢你们两个。 - develpr

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Hamidreza Kalantari · Accepted Answer

您正在发布到错误的 URL。

正确的格式应该是这样的：

var url="/products/parse";

您还需要发送CSRF令牌(否则会导致419错误)，详情请参见此处：

将此元标记放入<head>标签中：

<meta name="csrf-token" content="{{ csrf_token() }}">

然后可以通过jQuery这样访问它：

$('meta[name="csrf-token"]').attr('content')