要想到代理这个方面
一个项目需要介入第三方接口是必然产生跨域方面问题 此刻就要配置代理
vue2中 在vue.config.js 文件中的server下, vue3中安装的是vite就在vite.config.js 文件中的server下
配置的属性基本相同
找到文件后配置相对应的属性 值
import { defineConfig } from 'vite'
export default defineConfig({
server: {
// port: 4000, // 设置服务启动端口号
// open: true, // 设置服务启动时是否自动打开浏览器
cors: true, // 允许跨域
// 设置代理,根据我们项目实际情况配置
proxy: {
'^/api': { //api是自行设置的请求前缀,按照这个来匹配请求,有这个字段的请求,就会进到代理来
target: "http://apis.juhe.cn/",//是自己需要调的接口的前缀域名
changeOrigin: true, //是否跨域
//设置非https请求
secure: false,
rewrite: (path) => path.replace(/^\/api/, '') //重写匹配的字段,如果不需要放在请求路径上,可以重写为""
}
}
}
})
port 服务启动端号可以随意 只要不重复
open 设置服务启动时是否自动打开浏览器
cors 是否允许跨域
此刻vite.config.js文件已配置好
接下来就是 在你需要接入接口的页面在接口前输入/api 就完成当前接口的调用
当vite.config.js文件配置好 遇到开头为/api的借口就会自动截获代理的域名
接口调用成功