Axios.get 返回纯 html 而不是 JSON 返回数据
Posted
技术标签:
【中文标题】Axios.get 返回纯 html 而不是 JSON 返回数据【英文标题】：Axios.get returns plain html intead of JSON return data 【发布时间】：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');
【问题讨论】：
【参考方案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 >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 这样调用路由时，我得到了一些研究。这是什么问题？以上是关于Axios.get 返回纯 html 而不是 JSON 返回数据的主要内容，如果未能解决你的问题，请参考以下文章
无法使用 api 从 axios 获取数据 - vue js