Axios.get 返回纯 html 而不是 JSON 返回数据答案

【问题标题】：Axios.get returns plain html intead of JSON return dataAxios.get 返回纯 html 而不是 JSON 返回数据
【发布时间】：2020-04-11 18:06:08
【问题描述】：

我是响应 js 的新手，并尝试在 componentDidmount 时使用 axios.get 从数据库中获取数据。这是我试图获得产品的请求。我正在使用 laravel 的反应。

componentDidMount() {
        axios.get('http://localhost:8000/getproducts')
            .then(response => {
                console.log(response.data);
            });
    }

在控制器中我正在返回数据

public function products()
    {
       $products = Product::all();
       return response()->json($products);
    }

在axios.get 返回响应后，我得到以下纯 HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Learn React</title>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
        <link href="http://localhost:8000/css/app.css" rel="stylesheet">
    </head>
    <body>
       <div id="crud-app"></div>

       <script src="http://localhost:8000/js/app.js"></script>
    </body>
</html>

Web.php

<?php


Route::get('{any}', function () {
    return view('welcome');
})->where('any','.*');

Route::get('/', function () {
    return view('welcome');
});

Route::post('save-product', 'ProductController@saveProduct')->name('save.product');
Route::get('getproducts', 'ProductController@products')->name('get.products');

【问题讨论】：

标签： javascript reactjs laravel axios

【解决方案1】：

将 api url 移动到 php 文件的顶部，最好添加 'api/' 作为前缀

<?php

Route::post('api/save-product', 'ProductController@saveProduct')->name('save.product');
Route::get('api/getproducts', 'ProductController@products')->name('get.products');


Route::get('{any}', function () {
    return view('welcome');
})->where('any','.*');

Route::get('/', function () {
    return view('welcome');
});

【讨论】：

为什么在路线低于之前它不起作用？
出现此问题是因为 php 文件从顶部逐行运行。因此，如果第一行说将所有请求转发到“欢迎”视图。然后它会这样做并返回。
在这种情况下返回视图欢迎路线的工作会正常吗？
是的，如果以上网址都不匹配。所以在这种情况下，欢迎视图成为后备视图

【解决方案2】：

       axios.get(MyGlobleSetting.url + '/api/products')
       .then(response => {
         this.setState({ products: response.data });
       })
       .catch(function (error) {
         console.log(error);
       })
     }




render(){
    return (
      <div>
        <h1>Products</h1>


        <div className="row">
          <div className="col-md-10"></div>
          <div className="col-md-2">
            <Link to="/add-item">Create Product</Link>
          </div>
        </div><br />


        <table className="table table-hover">
            <thead>
            <tr>
                <td>ID</td>
                <td>Product Title</td>
                <td>Product Body</td>
                <td width="200px">Actions</td>
            </tr>
            </thead>
            <tbody>
              {this.tabRow()}
            </tbody>
        </table>
    </div>
    )
  }
}
export default DisplayProduct;

【讨论】：

【解决方案3】：

如果您使用 API 调用，则必须更改您的 URL，如下所示：

http://localhost:8000/api/getproducts

【讨论】：

我改变了，但它仍然得到相同的 html
你的 API 路由是什么？ @ArslanAkram
我正在 web.php 中编写我的路线，这是我的路线 Route::get('getproducts', 'ProductController@products')->name('get.products');跨度>
当我将路由放入 routes/api.php 并像 localhost:8000/api/getproducts 这样调用路由时，我做了一些研究。它的工作原理是什么。为什么它在 web.php 中不起作用?
您使用的是 API 还是 WEB？前端和后端是相同的还是使用不同的平台？ @ArslanAkram

【解决方案4】：

这可能是您服务器的设置，因为 get 响应被定向到您的 react 应用程序而不是您的 api 端点。尝试将您的 api 托管在另一个端口上，并让 axios 请求该 url 端口。

【讨论】：

在 laravel 中我应该在哪里更改才能使其正常工作？
当我将路由放入 routes/api.php 并像 localhost:8000/api/getproducts 这样调用路由时，我做了一些研究。它的工作原理是什么……有什么问题？
这是因为 get 请求在到达您的 api 端点之前首先解析到 react 应用程序，因此像正常浏览一样返回 html 而不是 rest API 调用

【解决方案5】：

在 Axios.get() HTTP 调用中传递附加设置

export const axiosConfig = {
    headers: {
        'Content-Type': 'application/json;charset=UTF-8',
        "Access-Control-Allow-Origin": "*",
        "APITOKEN": API_TOKEN
    }
};

 axios.get('http://localhost:8000/getproducts',axiosConfig)
            .then(response => {
   console.log(response.data);
 });

【讨论】：

没有APITOKEN参数可以忽略。
好的，问题出在您的 laravel api 响应中。
我该怎么办？
公共功能 products() { $products = Product::all(); return response()->json($products)->->header('Content-Type','application/json');试试这个希望这个解决方案有效。
当我将路由放入 routes/api.php 并像 localhost:8000/api/getproducts 这样调用路由时，我得到了一些研究。这是什么问题？