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

前端代理解决方案(开发环境),如果你使用的是 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)
})

你可能感兴趣的:(前端)