vue3 ts 解决接口请求跨域

509 阅读1分钟

在vite.config.ts中配置server

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),],
    server:{
      proxy:{
    //这里是通过请求/api 来转发到 http://47.98.212.252/
    //假如你要请求http://47.98.212.252/a
    //那么axios的url,可以配置为 /api/a
        '/api': {
          target: 'http://47.98.212.252/', // 实际请求地址
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, ""),
        },
      }
    }
})

可以配置请求默认接口

import axios from "axios";
axios.defaults.baseURL = "/api"

这样请求时默认携带/api

请求接口

//请求接口为 http://47.98.212.252/doctor/v1/information_all
export function get(params: getType) {
  return new Promise((resolve, reject) => {
      //实际请求的内容 默认携带了/api    /api替代了 http://47.98.212.252/
    axios.get('/doctor/v1/information_all',{params}).then(res => {
      console.log(res);
      resolve(res.data);
      console.log(res.data.data);
      // Loading.service(true).close();
      // Message({message: '请求成功', type: 'success'});
    }).catch(err => {
      reject(err.data)
      // Loading.service(true).close();
      // Message({message: '加载失败', type: 'error'});
    })
  });
}