Vite+Axios项目请求后端接口相关配置内容

一、相对地址请求

在实际项目中使用相对请求地址的情况比较多。

1. 封装请求文件

下面是封装Axios请求文件request.ts

ts 复制代码
import axios from 'axios'

const instance = axios.create({
  baseURL: '/pjone-server',
  timeout: 5000,
})
// 添加请求拦截器
instance.interceptors.request.use(config => {
  // todo:请求拦截逻辑代码
  return config
},
(error) => {
  return Promise.reject(new Error(error))
},
)
// 添加响应拦截器
instance.interceptors.response.use(response => {
  // todo:响应拦截逻辑
)

export default instance

2. 具体请求调用

javascript 复制代码
import request from './request'

export const getRecordsNum = () => {
  return request({
    url: '/lifeColor/getRecordsNum',
  })
}

3. 前端请求路径

通过上述配置,前端页面调用请求的路径为:

http://localhost:3000/pjone-server/lifeColor/getRecordsNum

4. 后端API接口

本地启动后端api为 http://localhost:1304/pjone-server/lifeColor/getRecordsNum 由于端口不同,这就导致跨域问题。这时就需要代理后端接口让前端能够调用到。

开发环境和生产环境的处理方式不同。

5. 开发环境代理

参考:入口vite.config.ts文件中配置以下内容

ts 复制代码
export default defineConfig({
  server: {
    proxy: {
      '/pjone-server': {
        target: 'http://127.0.0.1:1304/',
        changeOrigin: true,
      }
    },
  }, 
})

在开发环境中,Vite 使用 vite.config.js 中的 proxy 选项来配置代理,完成在开发服务器中的转发请求。

6. 生产环境代理

在 Vite 项目部署之后,proxy的配置内容不再起作用。这时就需要在部署项目的Nginx中进行设置。

nginx.conf配置内容如下:

conf 复制代码
location /pjone-server {
	proxy_pass   http://127.0.0.1:1304/pjone-server;
}

二、 绝对地址请求

在封装Axios请求的baseURL中也可以使用绝对请求路径,例如:

ts 复制代码
const instance = axios.create({
  baseURL: 'http://127.0.0.1:3007/api',
  timeout: 5000,
})

后端允许跨域

该后台是express项目,因为设置了允许跨域,所以直接路径访问是没问题的。

ini 复制代码
const express = require('express');
const cors = require('cors');

const app = express();
app.use(cors());
相关推荐
熊出没12 分钟前
Vue前端导出页面为PDF文件
前端·vue.js·pdf
VOLUN12 分钟前
Vue3项目中优雅封装API基础接口:getBaseApi设计解析
前端·vue.js·api
用户990450177800925 分钟前
告别广告干扰,体验极简 JSON 格式化——这款工具让你专注代码本身
前端
前端极客探险家28 分钟前
告别卡顿与慢响应!现代 Web 应用性能优化:从前端渲染到后端算法的全面提速指南
前端·算法·性能优化
袁煦丞1 小时前
【局域网秒传神器】LocalSend:cpolar内网穿透实验室第418个成功挑战
前端·程序员·远程工作
江城开朗的豌豆1 小时前
Vuex数据突然消失?六招教你轻松找回来!
前端·javascript·vue.js
好奇心笔记1 小时前
ai写代码随机拉大的,所以我准备给AI出一个设计规范
前端·javascript
江城开朗的豌豆1 小时前
Vue状态管理进阶:数据到底是怎么"跑"的?
前端·javascript·vue.js
用户21411832636021 小时前
dify案例分享-Dify v1.6.0 重磅升级:双向 MCP 协议引爆 AI 生态互联革命
前端
程序员海军1 小时前
AI领域又新增协议: AG-UI
前端·openai·agent