用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); });

为了在网页中实现输入车牌显示停车时间停车费用，并且实现服务器允许跨域请求，你可以按照以下步骤进行操作： 1. 在你的项目中创建一个 HTML 文件，例如 `index.html`。 2. 在 `index.html` 中添加必要的 HTML 结构和元素，例如输入车牌号的文本框、按钮和用于显示停车时间和停车费用的元素。示例代码如下： ```html <!DOCTYPE html> <html> <head> <title>停车信息</title> </head> <body> <label for="plate">车牌号：</label> <input type="text" id="plate" /> <button onclick="getParkingInfo()">获取信息</button> <p id="time"></p> <p id="fee"></p> <script src="script.js"></script> </body> </html> ``` 3. 在 `script.js` 文件中复制粘贴你提供的代码，并将其包裹在一个名为 `getParkingInfo()` 的函数中。这样，当用户点击获取信息按钮时，该函数将被调用。修改后的代码示例如下： ```javascript function getParkingInfo() { const plate = document.getElementById('plate').value; const options = { method: 'GET', url: 'http://10.198.8.10', params: { Token: 'Parking2023', TruckNo: plate }, headers: { 'content-type': 'application/json' } }; axios.request(options).then(function (response) { const timeElement = document.getElementById('time'); const feeElement = document.getElementById('fee'); timeElement.textContent = '停车时间：' + response.data.time; feeElement.textContent = '停车费用：' + response.data.fee; }).catch(function (error) { console.error(error); }); } ``` 4. 保存 `script.js` 文件和 `index.html` 文件。 5. 在你的服务器端代码中，设置允许跨域请求。具体的实现方式取决于你使用的服务器端框架和语言。以下是一个 Node.js Express 框架的示例代码，用于设置允许跨域请求： ```javascript const express = require('express'); const app = express(); app.use((req, res, next) => { res.header('Access-Control-Allow-Origin', '*'); res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE'); res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept'); next(); }); // 其他路由和中间件配置 app.listen(3000, () => { console.log('Server started on port 3000'); }); ``` 在这个示例中，通过添加一个中间件来设置跨域请求的响应头，其中的 `'Access-Control-Allow-Origin': '*'` 允许来自任何源的跨域请求。 6. 运行你的服务器，并在浏览器中打开 `index.html` 文件。输入车牌号并点击获取信息按钮，你应该能够看到停车时间和停车费用显示在页面上。请注意，为了使跨域请求正常工作，你需要确保服务器端正确设置了跨域请求的响应头。具体的设置方式取决于你使用的服务器端框架和语言。

阅读全文

相关推荐

Vue axios 跨域请求无法带上cookie的解决

完美解决axios跨域请求出错的问题

react axios 跨域访问一个或多个域名问题

axios.js跨域

axios 跨域请求

axios get怎么还会显示跨域_【解惑】axios请求同一接口，post请求没问题，get请求跨域...

axios 允许跨域

配置axios跨域后请求接口变成文件路径

axios跨域请求写法

vue axios跨域请求

vue axios跨域post请求

axios get 跨域请求

axios设置跨域请求

axios请求跨域问题

最新推荐

VUE axios发送跨域请求需要注意的问题

在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法

axios中cookie跨域及相关配置示例详解

nodejs搭建本地服务器轻松解决跨域问题

js判断请求的url是否可访问,支持跨域判断的实现方法

GitHub图片浏览插件：直观展示代码中的图像

管理建模和仿真的文件

【OPPO手机故障诊断专家】：工程指令快速定位与解决

求[100，900]之间相差为12的素数对（注：要求素数对的两个素数均在该范围内）的个数

Android IPTV项目：直播频道的实时流媒体实现