Bootstrap

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' //配置环境 

;