解决跨域问题(vite、axios/koa)

两种方法选其一即可

一、后端koa设置中间件

TypeScript 复制代码
app.use(async (ctx, next)=> {
    ctx.set('Access-Control-Allow-Origin', '*');
    ctx.set('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
    ctx.set('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
    if (ctx.method == 'OPTIONS') {
      ctx.body = 200; 
    } else {
      await next();
    }
  })

二、前端

1.vite.config.ts文件配置proxy代理

TypeScript 复制代码
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import path from 'path'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(),
	AutoImport({
		resolvers: [ElementPlusResolver()],
	  }),
	  Components({
		resolvers: [ElementPlusResolver()],
	  }),
  ],
  resolve: {
		alias: {
			'@': path.resolve(__dirname, './src')
		},
  },
  css: {
		preprocessorOptions: {
				scss: {
					additionalData: `
					@use "@/style/global.scss" as *;
				`,
				}
		}
  },
  server:{
	proxy:{
		"/api":{
			target:"http://localhost:3000/",
			changeOrigin: true,
			rewrite: (path) => path.replace(/^\/api/, '')
		}
	}
  }
})

2.axios配置文件

TypeScript 复制代码
import axios from 'axios';

const http=axios.create({
    baseURL:'/api',
    timeout: 1000
})

export default http;

3.在main.ts文件中引入axios

TypeScript 复制代码
import { createApp } from 'vue'
import './style.scss'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import {router} from './router/index.ts'

import axios from 'axios'

createApp(App).use(ElementPlus).use(router).mount('#app')
createApp(App).config.globalProperties.$axios=axios

三、使用

javascript 复制代码
import http from '@/plugins/axios'
import {onMounted,ref} from 'vue';

const getData = async () => {
    http.get('/products').then(res=>{
        console.log('test.res');
        
    })
}
相关推荐
烛阴7 分钟前
【TS 设计模式完全指南】用工厂方法模式打造你的“对象生产线”
javascript·设计模式·typescript
定栓11 分钟前
Typescript入门-类型断言讲解
前端·javascript·typescript
Thetimezipsby3 小时前
基于Taro4打造的一款最新版微信小程序、H5的多端开发简单模板
前端·javascript·微信小程序·typescript·html5·taro
流影ng5 小时前
【TypeScript】闭包
typescript
葡萄城技术团队6 小时前
TypeScript 队列实战:从零实现简单、循环、双端、优先队列,附完整测试代码
typescript
烛阴21 小时前
【TS 设计模式完全指南】从“入门”到“劝退”,彻底搞懂单例模式
javascript·设计模式·typescript
lypzcgf21 小时前
Coze源码分析-资源库-删除插件-前端源码-核心组件实现
前端·typescript·前端框架·react·coze·coze插件·智能体平台
子兮曰1 天前
🚀Vue3异步组件:90%开发者不知道的性能陷阱与2025最佳实践
前端·vue.js·vite
江拥羡橙1 天前
【目录-单选】鸿蒙HarmonyOS开发者基础
前端·ui·华为·typescript·harmonyos
叫我阿柒啊1 天前
从Java全栈到Vue3实战:一次真实面试中的技术探索
java·数据库·spring boot·微服务·typescript·vue3·restful