laravel Axios.get返回普通html而不是JSON返回数据

xxls0lw8 于 2023-01-21 发布在 iOS

关注(0)|答案(6)|浏览(217)

我是react js的新手，当componentDidmount的时候，我尝试使用axios.get从数据库中获取数据，这是我尝试获取产品的请求，我使用的是带有laravel的react。

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

在Controller中，我返回数据

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');

laravel

来源：https://stackoverflow.com/questions/59404698/axios-get-returns-plain-html-intead-of-json-return-data

6条答案

按热度按时间

zz2j4svz1#

将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');
});

赞(0）回复(0）举报 2023-01-21

5m1hhzi42#

在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);
 });

赞(0）回复(0）举报 2023-01-21

lnvxswe23#

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

赞(0）回复(0）举报 2023-01-21

1cosmwyk4#

如果您正在使用API调用，那么您必须像下面这样更改您的URL：

http://localhost:8000/api/getproducts

赞(0）回复(0）举报 2023-01-21

ig9co6j15#

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;

赞(0）回复(0）举报 2023-01-21

r9f1avp56#

只是添加“/”在这结束网址像这样
从“http：//本地主机：8000/获取产品”到“http：//本地主机：8000/获取产品/”

赞(0）回复(0）举报 2023-01-21