Javascript get返回JSON返回数据的纯html内部_Javascript_Reactjs_Laravel_Axios

Javascript get返回JSON返回数据的纯html内部

javascript reactjs laravel

Javascript get返回JSON返回数据的纯html内部,javascript,reactjs,laravel,axios,Javascript,Reactjs,Laravel,Axios,事实上，我对react js并尝试使用axios.get when componentDidmount从数据库获取数据是新手。这是我试图得到产品的要求。我在用react和laravel componentDidMount() { axios.get('http://localhost:8000/getproducts') .then(response => { console.log(response.data);

事实上，我对react js并尝试使用axios.get when componentDidmount从数据库获取数据是新手。这是我试图得到产品的要求。我在用react和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');

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

这可能是您的服务器设置，因为get响应被定向到您的react应用程序，而不是api端点。尝试将api托管在另一个端口上，并让axios请求该url端口。
如果使用api调用，则必须更改url，如下所示：
http://localhost:8000/api/getproducts

axios.get（MyGlobleSetting.url+'/api/products'）
。然后（响应=>{
this.setState（{products:response.data}）；
})
.catch（函数（错误）{
console.log（错误）；
})
}
render（）{
返回(
产品
创造产品


身份证件
产品名称
产品主体
行动
{this.tabRow（）}
)
}
}
出口默认显示产品；
将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');
});

如果没有，可以忽略APITOKEN参数。好的，问题出在您的laravel api响应中。我应该怎么做？公共函数products（）{$products=Product:：all（）；return response（）->json（$products）->->->header（'Content-Type'，'application/json'）；}试试这个，希望这个解决方案能起作用。当我把我的路由放在routes/api.php中并像localhost:8000/api/getproducts这样调用route时，我得到了一些研究。。问题是什么？在laravel中，我应该在哪里更改以使其工作？我做了一些研究，将我的路由放在routes/api.php中，并像这样调用route localhost:8000/api/getproducts its works。。问题是什么？这是因为get请求在到达api端点之前首先解析到react应用程序，因此返回html就像正常浏览一样，而不是rest api调用。我改变了，但它仍然得到相同的htmlwhat is your api route@ArslanAkrami正在web.php中编写我的路由，这是我的路由：：get（'getproducts'，'ProductController@products'）->name（'get.products'）；当我把我的路由放在routes/api.php中并像下面这样调用route:8000/api/getproducts-its-works.时，我做了一些研究。。为什么它不能在web.php中工作？您使用的是API还是web？前端和后端在同一个平台上还是使用不同的平台@ArslanAkramwhy它在路由位于下方之前不工作？出现此问题是因为php文件从顶部逐行运行。因此，如果第一行显示将所有请求转发到“欢迎”视图。然后返回。在这种情况下，返回视图欢迎路由的工作将正常工作？是的，如果上面的URL不匹配。因此，在这种情况下，欢迎视图变成了回退视图
<?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');
});