Vue front-end configuration reverse proxy to solve cross-domain problems

1. Find proxyTable in index.js under the config folder of the project (if you are using vue3 or above, please find vueConfig.js in the root directory): {}Configuration

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

2. Find your api package or write the folder where the interface address is written  

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

3. Restart the project and solve it perfectly while running

Guess you like

Origin blog.csdn.net/wei80231996/article/details/110530083