做seo用什么网站系统,企业开展网站建设,天天联盟没网站怎么做,wordpress收费主题激活vue项目多个不同的服务器请求地址管理
在vue项目开发过程中#xff0c;获取不同的数据可能会出现需要请求多个不同服务器地址的域名#xff0c;这个时候需要对不同域名的请求地址进行管理以及跨域的代理。 一、单服务器域名地址的跨域代理和请求配置#xff1a;
跨域配置获取不同的数据可能会出现需要请求多个不同服务器地址的域名这个时候需要对不同域名的请求地址进行管理以及跨域的代理。 一、单服务器域名地址的跨域代理和请求配置
跨域配置 在vue项目的vue.config.js文件中对devServer.proxy进行配置如下
module.exports {publicPath: ./, // 默认加载地址为当前目录下devServer:{hot: true,port: 8000, // 启动端口open: true, // 启动后是否自动打开网页proxy: {/api/: {target: http://XXXXX.com/,changeOrigin: true,pathRewrite: {^/api: }}}}
}axios请求封装 封装axios请求的js文件中配置如下
import axios from axios;axios.defaults.baseURL /api; // 默认请求地址
// 其他配置此处省略......// 封装请求API
export function XXXAPI(data) {return axios({url: /xxx/xxx/, // 接口地址method: post, // 请求方法data: data, // 参数数据})
}// 需要调用接口时调XXXAPI即可这是单一服务器请求地址的写法直接在axios.defaults选项中配置baseURL地址。
二、多服务器域名地址的跨域代理和请求配置
多服务器域名的跨域配置 同样是在vue.config.js文件中对devServer.proxy进行配置如下
module.exports {publicPath: ./, // 默认加载地址为当前目录下devServer:{hot: true,port: 8000, // 启动端口open: true, // 启动后是否自动打开网页proxy: {// 配置服务器地址一/api/: {target: http://XXXXX.com/,changeOrigin: true,pathRewrite: {^/api: }},// 配置服务器地址二/bpi/: {target: http://XXXXX.com/,changeOrigin: true,pathRewrite: {^/bpi: }}}}
}// 多个服务器的跨域配置在proxy中添加多个类进行设置多个服务器地址的axios请求封装 在封装的axios请求文件中配置如下
import axios from axios;const aaAxios axios.create({baseURL: /api
})const bbAxios axios.create({baseURL: /bpi
})// 封装请求API
export function aaAPI(data) {return aaAxios({url: /xxx/xxx/, // 接口地址method: post, // 请求方法data: data, // 参数数据})
}export function bbAPI(data) {return bbAxios({url: /xxx/xxx/, // 接口地址method: post, // 请求方法data: data, // 参数数据})
}// 需要调用接口时调封装的API即可
多服务器请求地址的情况下axios请求封装中需要根据不同的请求地址创建不同的axios对象通过axios.create()设置不同的baseURL地址。在后续封装请求API时根据不同的接口使用不同的axios对象即可实现同一个vue项目请求不同的服务器地址。
END
如果对你有帮助记得点个赞噢~~
