Nuxt3 实现接口域名动态化

为什么要做接口动态?

  • 多个域名指向同一个项目, 比如www.abc.con和abc.com都指向同一个项目, 写死前缀会出现跨域问题
  • 小公司没有运维, Nginx配置不太熟悉
  • 之前项目的接口前缀一直是通过不同的.env文件配置好的. 想实现下动态化

此时可以通过前端项目实现接口域名动态-根据网站域名来处理, 避免接口跨域

怎么实现?

1, 创建环境配置 .env.developmen和.env.production

ini 复制代码
// .env.developmen (本地开启代理使用)
NUXT_PUBLIC_API_BASE = /api
arduino 复制代码
// .env.production
NUXT_PUBLIC_API_BASE = //www.abc.com

2, 在 nuxt.config.ts 中增加配置, 将环境配置信息加入到项目运行配置中

arduino 复制代码
export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      apiBase: process.env.NUXT_PUBLIC_API_BASE,
    }
  },
})

3, 创建plugins文件夹及下面的api-domain.ts

typescript 复制代码
/**
 * 接口域名 根据网站域名一致
 * 客户端获取域名, 接口请求时使用
 */
import { defineNuxtPlugin } from '#app'

export default defineNuxtPlugin((nuxtApp: any) => {
  // 客户端获取域名
	if (process.client) {
    // 获取项目运行时的配置
      const config = useRuntimeConfig()
    // 获取配置的接口前缀
      const apiBase = config.public.apiBase
    let currentDomain = ''
    // 非本地运行, 协议和域名拼接下
		if (apiBase !== '/api') {
			currentDomain = window.location.protocol + '//' + window.location.host
		} else {
      // 本地运行
      currentDomain = apiBase
    }
    // 注入到项目中
    nuxtApp.provide('apiDomain', currentDomain)
	}
})

4, 组件中使用

xml 复制代码
<script setup lang="ts">
import { useNuxtApp } from '#app';
const nuxtApp = useNuxtApp();
const apiDomain = nuxtApp.$apiDomain;


const getList = async () => {
	try {
		const response = await $fetch(
			`${apiDomain}/getList/abc/111`,
			{
				method: 'POST',
			}
		)
    console.log(response)
		
	} catch (error) {
		console.log(error)
	}
}

onMounted(() => {
	getList()
})
</script>

<template>
</template>

<style scoped>
</style>
相关推荐
zwjapple3 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20205 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem6 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊6 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术6 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
GISer_Jing6 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止7 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall7 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴7 小时前
简单入门Python装饰器
前端·python
袁煦丞8 小时前
数据库设计神器DrawDB:cpolar内网穿透实验室第595个成功挑战
前端·程序员·远程工作