vite构建工具解决vue3项目跨域的问题

1.什么是跨域

跨域是在网络开发中指浏览器出于安全原因，阻止来自一个域（网址）的网页向另一个域（网址）请求资源。这样做是为了防止恶意网站窃取用户信息或进行其他不正当行为。

2.解决办法

        2.1配置

跨域是因为浏览器的安全策略引起，所以我们不用浏览器向另一个域（网址）发请求，而是通过构建工具给另一个域（网址）发请求，这样就避免了跨域的问题

在vue项目中，找vite.config.js文件，写下面的代码：

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  /*-------------------------注意，上面的代码项目创建的时候自带的----------------*/
  //定义代理
  server: {
    proxy: {
      //（/api）表示获取路径中包含api的请求
      '/api': {
        //后台服务所在的源
        target: 'http://localhost:9090',
        changeOrigin: true,
        // 把（/api）替换陈空字符串
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})

        2.2用axios发请求

//定义axios示例
const instance = axios.create({
/*
注意，这里只写/api，/api就代表我们在vite.config.js中定义的target: 'http://localhost:9090',
*/
  baseURL: '/api', 
  timeout: 10000
})

比如，我们给后台发请求，获取管理员的基本信息

//获取管理员的基本信息
export const adminGetInfoService = () => {
  return request.get('/admin/info')
}

原文地址：https://blog.csdn.net/2201_76067045/article/details/142981740

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！