用script.js做一个网页,输入车牌显示停车时间,停车费,实现网页跨域。接口如下import axios from "axios"; const options = { method: 'GET', url: 'http://10.198.8.10', params: {Token: 'Parking2023', TruckNo: '粤AFN8885'}, headers: {'content-type': 'application/json'} }; axios.request(options).then(function (response) { console.log(response.data); }).catch(function (error) { console.error(error); });
时间: 2024-04-18 16:33:53 浏览: 102
为了实现网页跨域,你可以通过以下方式修改`script.js`文件中的代码:
```javascript
function getParkingInfo() {
var licensePlate = document.getElementById("licensePlate").value;
var options = {
method: 'GET',
url: 'http://10.198.8.10',
params: {Token: 'Parking2023', TruckNo: licensePlate},
headers: {'content-type': 'application/json'}
};
axios.get("/api/parking-info", options) // 将请求发送到相对路径 "/api/parking-info"
.then(function (response) {
var data = response.data;
var result = document.getElementById("result");
result.innerHTML = "停车时间: " + data.time + "<br>停车费用: " + data.fee;
})
.catch(function (error) {
console.error(error);
});
}
```
然后,在服务器端设置一个代理来转发请求。例如,如果你使用 Node.js 和 Express 框架,可以按照以下步骤进行设置:
1. 安装 `http-proxy-middleware` 模块:
```bash
npm install http-proxy-middleware
```
2. 在服务器端的入口文件中添加以下代码:
```javascript
const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');
const app = express();
// 设置代理
app.use('/api', createProxyMiddleware({
target: 'http://10.198.8.10',
changeOrigin: true
}));
// 静态文件服务
app.use(express.static('public'));
// 启动服务器
app.listen(3000, () => {
console.log('Server is running on port 3000');
});
```
3. 将 `script.js` 文件放在 `public` 目录下。
现在,当你在浏览器中打开网页并输入车牌号进行查询时,请求会被代理服务器转发到目标服务器并返回数据,实现了跨域访问。请确保将代理的目标地址设置为正确的接口地址。
阅读全文