function getPlateNumber() { 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" }, }; 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; }控制台显示index.jsp:1 Access to XMLHttpRequest at 'http://10.198.8.102:8081/TruckParkTime?Token=Parking20230103163153666&TruckNo=1' from origin 'http://localhost:8080' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header contains multiple values '*, *', but only one is allowed是哪里有问题
时间: 2024-04-24 09:22:48 浏览: 140
这个错误提示显示在控制台中,说明是浏览器的跨域安全策略导致的。具体来说,是因为服务器响应中包含了两个 '*',而浏览器只允许一个 '*'。这是一个常见的错误,需要在服务器端修改响应头。
在你的代码中,请求头部并没有包含 'Access-Control-Allow-Origin' 字段,因此需要在服务器端进行设置。你需要在服务器端处理请求的代码中添加如下代码:
Java Servlet:
```java
response.setHeader("Access-Control-Allow-Origin", "http://localhost:8080");
```
Node.js:
```javascript
res.setHeader("Access-Control-Allow-Origin", "http://localhost:8080");
```
其中,'http://localhost:8080' 指的是允许跨域访问的源。如果你想允许所有的源,可以设置 '*':
```java
response.setHeader("Access-Control-Allow-Origin", "*");
```
```javascript
res.setHeader("Access-Control-Allow-Origin", "*");
```
但是要注意安全问题,不建议在生产环境中使用 '*'。
相关问题
function getPlateNumber() { 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" }, }; 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; }如何跨域
要实现跨域,需要在服务端进行配置。常见的跨域解决方案有以下几种:
1. JSONP:通过动态创建 script 标签,将需要获取的数据作为参数传递到服务端,服务端将数据封装在回调函数中返回给前端,前端通过回调函数获取数据。
2. CORS:在服务端设置允许跨域的域名和协议。
3. 代理:前端将请求发送到自己的服务器,由服务器再请求第三方接口,最后将数据返回给前端。
在上述代码中,使用的是 axios 库发送请求,可以在请求头中添加 `Access-Control-Allow-Origin` 字段来实现跨域,例如:
```javascript
const options = {
method: "GET",
url: url,
headers: {
"content-type": "application/json",
"Access-Control-Allow-Origin": "http://example.com" // 允许跨域的域名
},
};
```
需要注意的是,这种方式需要服务端也进行配合,在响应头中添加 `Access-Control-Allow-Origin` 字段,值为允许跨域的域名。
代码如下function getTruckNo() { const TruckNo = document.getElementById("TruckNo").value; const script = document.createElement("script"); const url = `http://10.198.8.102:8081/TruckParkTime?Token=Parking20230103163153666&TruckNo=${TruckNo}&callback=showResult`; script.src = url; document.head.appendChild(script); } function showResult(data) { const resultDiv = document.getElementById("result"); const truckNo = data.TruckNo; const intime = data.Intime; const parkTime = data.ParkTime; const money = data.Money; const html = `车牌: ${truckNo}<br>进场时间: ${intime}<br>停车时长: ${parkTime}<br>产生金额: ${money}`; resultDiv.innerHTML = html; }。接口返回"{\"Code\": \"0\",\"ErrorMsg\": \"0\",\"TruckNo\": \"粤AFN8885\",\"Intime\": \"2023/7/14 12:09:40\",\"ParkTime\": \"249\",\"Money\": \"0\"}",为什么网页不显示
根据你提供的代码,看起来是通过调用一个远程接口获取数据,并将返回的数据展示在网页上。根据你提供的接口返回值,其中`Code`和`ErrorMsg`字段都为0,说明返回的数据正常。那么问题可能出在其他地方。
首先,你可以检查一下以下几点:
1. 确保`getTruckNo`函数被正确调用,例如通过按钮点击事件触发。
2. 确保`document.getElementById("TruckNo").value`获取到了正确的值。
3. 检查网络请求是否成功,可以在浏览器的开发者工具中查看网络请求的状态和返回值。
4. 确保`showResult`函数被正确调用,并且传入了正确的参数。
如果以上步骤都没有问题,那么可能是其他地方出现了错误。你可以进一步调试代码,例如在关键部分加上日志输出,查看是否有错误或异常发生。另外,还可以检查一下网页中相关元素的ID是否正确,确保能够正确地找到对应的元素。
希望以上提示对你有帮助!如果问题还未解决,请提供更多代码和错误信息,以便更好地帮助你解决问题。
阅读全文