function getPlateNumber() { const plateNumber = document.getElementById("plateNumber").value; const options = { method: "GET", url: "http://10.198.8.102:8081/TruckParkTime", params: { Token: "Parking20230103163153666", TruckNo: plateNumber }, headers: { "content-type": "application/json" }, }; axios .request(options) .then(function (response) { console.log(response.data); var data = JSON.parse(response.data); console.log(data.TruckNo); console.log(data.Intime); console.log(data.ParkTime); console.log(data.Money); showResult(data); }) .catch(function (error) { console.error(error); }); } function showResult(data) { const resultDiv = document.getElementById("result"); resultDiv.textContent = "车牌:"+ data.TruckNo + "进场时间:"+ data.Intime+", 停车时长:" + data.ParkTime+", 产生金额:" + data.Money; }哪里有问题
时间: 2024-04-25 13:25:48 浏览: 10
代码中存在一个问题,axios request 的 URL 是 "http://10.198.8.102:8081/TruckParkTime",但是请求的方法是 GET,根据 HTTP 规范,GET 请求的参数应该以 query string 的形式添加到 URL 后面,而不是以 JSON 对象的形式添加到 params 属性中。因此,应该将 params 属性中的内容以 query string 的形式添加到 URL 后面,例如:
```javascript
const plateNumber = document.getElementById("plateNumber").value;
const queryString = `Token=Parking20230103163153666&TruckNo=${plateNumber}`;
const url = `http://10.198.8.102:8081/TruckParkTime?${queryString}`;
const options = {
method: "GET",
url: url,
headers: { "content-type": "application/json" },
};
```
这样修改之后,就可以正确地发送 GET 请求,获取到相应的数据了。
相关问题
const plateNumber = document.getElementById("plateNumber").value; const options = { method: "GET", url: "http://10.198.8.102:8081/TruckParkTime", params: { Token: "Parking66", TruckNo: plateNumber }, headers: { "content-type": "application/json",'Origin':'http://localhost:8080'}, };如何将 "Access-Control-Allow-Origin" 头部的值设置为 "*"
在客户端的 AJAX 请求中,是无法设置服务器端的响应头部的,因此你无法直接将 "Access-Control-Allow-Origin" 头部的值设置为 "*"。
"Access-Control-Allow-Origin" 头部是由服务器端设置的,用于指定允许跨域请求的来源。如果你想允许任何来源的请求访问你的资源,你需要在服务器端设置该头部的值为 "*"。
在你的服务器端代码中,你可以使用以下代码来设置 "Access-Control-Allow-Origin" 头部的值为 "*":
```javascript
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
next();
});
```
这段代码会在每个请求被处理前先设置响应头部,从而允许任何来源的请求访问你的资源。请注意,在生产环境中建议更加谨慎地设置该头部,以确保安全性。如果你想限制跨域请求的来源,可以将该头部的值设置为允许的域名。
代码如下 const plateNumber = document.getElementById("plateNumber").value; const options = { method: "GET", url: "http://10.198.8.102:8081/TruckParkTime", params: { Token: "Parking666", TruckNo: plateNumber }, headers: { "content-type": "application/json" }, }; axios .request(options) .then(function (response) { console.log(response.data); var data = JSON.parse(response.data); console.log(data.TruckNo); console.log(data.Intime); console.log(data.ParkTime); console.log(data.Money); showResult(data); }) .catch(function (error) { console.error(error); }); }。如何在接口的响应头中设置 Access-Control-Allow-Origin 字段为只包含一个域名或者为 *
你需要在服务端的接口代码中设置响应头,具体的位置取决于你的代码结构。以下是 Java Servlet 的示例代码,在接口实现代码中的 `doGet` 或 `doPost` 方法中添加如下代码:
1. 设置允许跨域的域名为 `http://localhost:8080`
```
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 允许 http://localhost:8080 跨域访问
response.setHeader("Access-Control-Allow-Origin", "http://localhost:8080");
// 其他接口实现代码
}
```
2. 设置允许任意域名跨域访问
```
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 允许任意域名跨域访问
response.setHeader("Access-Control-Allow-Origin", "*");
// 其他接口实现代码
}
```
这样就可以在服务端设置允许跨域访问的响应头了。需要注意的是,设置响应头时需要在接口实现代码中进行,而不是在前端 JavaScript 代码中进行。