vue跨域代理配置问题

vue3实现跨域

跨域问题可以用两种办法解决

1. 服务器直接允许跨域

重点不在这，以后有机会再补充

1. 直接在vue前端设置跨域代理

以目前使用的版本作为例子，版本vue3_cli，配置在vite.config.js里

第一步在vite.config.js配置

export default defineConfig({
    server: {
        host: '0.0.0.0',
        port: 3000,
        open: true,
        proxy: {
          "/app": {
                target: "http://xxx.xx.xx/",
                changeOrigin: true, //允许跨域
                rewrite: (path) => path.replace(/^\/app/, '') //这里可以url重写
            },
        },
    },
})

第二步配置$axios.defaults.baseURL

$axios.defaults.baseURL = '/app'

注意这里的地址与vite.config.js配置相对应

---------------------------------------------分割线-------------------------------------------------------------------

vue2实现跨域

1.安装vue-cli（如果尚未安装）：

npm install -g @vue/cli

2.创建或修改vue.config.js文件：在项目根目录下创建或修改vue.config.js文件，添加代理配置。

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://your-api-server.com', // 目标服务器的地址
        changeOrigin: true, // 是否改变请求的源地址
        pathRewrite: { '^/api': '' } // 重写路径，去掉`/api`前缀
      }
    }
  }
}

3.修改前端请求代码：在前端代码中，将请求路径中的/api前缀替换为代理前缀。

axios.get('/api/your-endpoint').then(response => {
  console.log(response.data);
});

注：VUE2实现参考百度文心快码