vue3前端开发过程中，解决跨域

小徐敲java

于 2025-05-23 16:50:47 发布

阅读量246

点赞数 1

文章标签：前端

本文链接：https://blog.csdn.net/qq_19891197/article/details/148171836

版权

前端代理解决方案（开发环境）,如果你使用的是 Vite、Webpack 等构建工具，可以配置代理：

// vite.config.js
export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://192.168.11.51:7001',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})

前端代码也要相应修改

// 修改前
watch(count, async () => {
  const response = await axios.get(`http://192.168.11.51:7001/test/demoThree/getUser`, {
    method: 'GET',
    headers: {
      'Content-Type': 'application/json'
    },
    params: {
      name: '张三',
      age: 18
    }
  })
  console.log(response.data)
})

// 修改后
watch(count, async () => {
  const response = await axios.get(`/api/test/demoThree/getUser`, {
    method: 'GET',
    headers: {
      'Content-Type': 'application/json'
    },
    params: {
      name: '张三',
      age: 18
    }
  })
  console.log(response.data)
})