vue前端配置反向代理解决跨域问题

1.在项目中的config文件夹下面index.js中(如果你用的是vue3以上请在根目录下找到vueConfig.js)中找到proxyTable:{}配置

proxyTable: {
      '/baseApi': {
        target: 'https://XXXXXXXXXX.com',//服务器地址 及接口地址
        changeOrigin: true, // 在本地会创建一个虚拟服务端,然后发送请求的数据,允许跨域
        secure: false, // https下设置为true
        pathRewrite: {
            "^/baseApi": ""//重写
        }
      },
    },

2.找到你的api封装或者写接口地址的文件夹写上  

const isDev = process.env.NODE_ENV === 'development'
const HOST = isDev ? '/baseApi' : ''//    /baseApi这个是反向代理中你自己定义的变量名
export const api = {
    baseUrl: HOST,
}
export default {
 例如:login:`${HOST}/api/login` //拼接上代理名
}

3.重启项目 在运行完美解决

猜你喜欢

转载自blog.csdn.net/wei80231996/article/details/110530083