我使用cordova创建了一个博客应用程序;然后我把wordpress作为后台托管在000webhost.com上。我的博客应用程序是从后端检索帖子，但不发送帖子到后端，因为我不断得到一个错误，当我检查我的控制台登录chrome检查。下面是我的blog-app前端代码:
<html>
<head>
<title>My App</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
<link rel="stylesheet" href="app.min.css">
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="app-page" data-page="home">
<div class="app-topbar">
<div class="app-title">Home page</div>
</div>
<div class="app-content">
<div class="app-section">
<div class="app-button" data-target="page2">Go to Create Post</div>
</div>
<div class="d-flex justify-content-center pt-2" id="spinner">
<div class="spinner-border text-primary"></div>
</div>
<div class="container pt-2" id="mainDiv">
</div>
<div class="container">
<h2>Submit a post</h2>
<form class="was-validated">
<div class="form-group">
<label for="title">Title:</label>
<input type="text" class="form-control" id="title" placeholder="title of post" name="title" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="form-group">
<label for="content">Content:</label>
<textarea name="content" id="content" cols="30" rows="3" class="form-control" required></textarea>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<button type="submit" class="btn btn-success">Submit</button>
</form>
</div>
</div>
</div>
<div class="app-page" data-page="page2">
<div class="app-topbar">
<div class="app-button left" data-back data-autotitle></div>
<div class="app-title">Create Post</div>
</div>
<div class="app-content"></div>
</div>
<script src="cordova.js"></script>
<script src="./js/jquery.js"></script>
<script src="app.min.js"></script>
<script src="./js/index.js"></script>
<script>
App.controller('home', function (page) {
$(document).ready(function () {
var rootUrl = 'https://temi-tee.000webhostapp.com/';
/**
* wordpress url to retrieve all posts from our blog
*/
const url = `${rootUrl}/wp-json/wp/v2/posts`;
/**
* wordpress url used to retrieve a token for authentication
*/
var tokenUrl = `${rootUrl}/wp-json/jwt-auth/v1/token`;
/**
* in this custom scenario, we will be creating posts via admin
* access however in complex cases you should be able to register
* new users, the admin username and password is needed to retrieve
* a token which will be attached
* as headers to subsequent requests for authentication
*/
var adminDet = {
username: 'admin',
password: '*****'
};
/**
* variable to store token retrived from the api
*/
var token;
loadData();
/**
* ajax post request to retrieve the token once the app loads
*/
$.post(tokenUrl, adminDet,
function (data, status) {
console.log("token: " + data.token);
token = data.token;
});
/**
* loadData() function makes a get request to retrieve
* all posts from the wordpress blog
*/
function loadData() {
$.getJSON(url, function (data) {
console.log(data);
/**
* removes the spinner once a response is gotten from the api
*/
$("#spinner").remove();
/**
* ensures that the div tag with id= mainDiv
* is empty before appending innerHtml to it
*/
$("#mainDiv").empty();
/**reiterates through each list in the json oblect
* while appending it to the div tag with id= mainDiv
*/
for (var i = 0; i < data.length; i++) {
var div = document.createElement('div');
div.innerHTML = `
<div class="card pt-1">
<div class="card-body">
<h4 class="card-title">${data[i].title.rendered}</h4>
<p class="card-text text-wrap">${data[i].content.rendered}</p>
</div>
</div>`;
$("#mainDiv").append(div);
};
});
}
/**
* on form submission
* submits the required parameters to create a new post in the
* wordpress blog
*/
$('form').submit(function (event) {
// stop the form from submitting the normal way and refreshing the page
event.preventDefault();
// get the form data
// there are many ways to get this data using jQuery (you can use the
// class or id also)
var formData = {
title: $('input[name=title]').val(),
content: $('textarea[name=content]').val(),
status: 'publish'
};
console.log(formData);
$.ajax({
url: url,
method: 'POST',
data: JSON.stringify(formData),
crossDomain: true,
contentType: 'application/json',
headers: {
'Authorization': 'Bearer ' + token
},
success: function (data) {
console.log(data);
/**
* refreshes app-content to display latest posts
*/
loadData();
},
error: function (error) {
console.log(error);
}
});
});
});
});
App.controller('page2', function (page) {
// put stuff here
});
try {
App.restore();
} catch (err) {
App.load('home');
}
</script>
</body>
</html>```
This is what the complete error code looks like:
jquery.js:2 POST https://temi-tee.000webhostapp.com//wp-json/wp/v2/posts net::ERR_HTTP2_PROTOCOL_ERROR
send @ jquery.js:2
ajax @ jquery.js:2
(anonymous) @ index.html:152
dispatch @ jquery.js:2
v.handle @ jquery.js:2
你需要纠正你的路线。如果您正在使用的端点的错误响应是:
{
code: "rest_no_route",
message: "No route was found matching the URL and request method.",
data: {
status: 404
}
}
您可能试图使用GET而不是POST
确保你在Wordpress中设置了正确的permalinks选项，并且请求是POST请求，用户名正确等。