vue3+vite接口跨域处理

https://www.xxx.com:8080

出于浏览器的同源策略限制，当一个请求url的协议（https）、域名（www.xxx.com）、端口（8080）三者之间任意一个与当前页面url不同即为跨域。

在前后端分离的项目中，经常会出现跨域的问题。

在vue3项目中，前端可以通过配置proxy来实现。

vite.config.js

export default defineConfig({
    plugins: [
    server: { 
      host: '0.0.0.0',
      port: 3000,
      open: true,
      proxy: {
        '/api': {
          target: 'XXXX',	//接口地址
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, '')
        },
      }
    }
}) 

axios.js

axios.defaults.baseURL = '/api' //配置环境