前端调用后端接口怎么根据不同页面添加对应端口号
时间: 2024-03-27 07:34:58 浏览: 159
Vue前后端不同端口的实现方法
当你的网站有不同页面需要调用后端接口时,可以通过在前端代码中设置配置项来实现根据不同页面添加对应的端口号。具体实现方式如下:
1. 在前端代码中定义一个配置对象,用于存储不同页面对应的端口号,例如:
```
const config = {
home: '',
about: ':8080',
contact: ':3000'
}
```
2. 在发送请求时,获取当前页面的URL,并根据页面名称从配置对象中获取对应的端口号,例如:
```
const url = window.location.href;
const pageName = url.substring(url.lastIndexOf('/') + 1);
const port = config[pageName];
const apiUrl = `http://yourdomain.com${port}/api/your-endpoint`;
// 发送请求到 apiUrl
```
3. 上述代码中,`window.location.href`获取当前页面的URL,`url.substring(url.lastIndexOf('/') + 1)`获取当前页面的名称,然后根据页面名称从配置对象中获取对应的端口号,最后拼接出完整的API URL。这样就可以根据不同页面添加对应的端口号了。
阅读全文