2024年前端最新vue配置proxy跨域代理_vue配置多个跨域proxy(2),2024年最新前端面试精讲
fksdskjfzxklzk 2024-06-19 09:03:03 阅读 84
最后
文章到这里就结束了,如果觉得对你有帮助可以点个赞哦
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
const { defineConfig } = require(‘@vue/cli-service’)
module.exports = defineConfig({
devServer:{
proxy:{
// 代理1
// 当你请求是以/api开头的时候,则我帮你代理访问到http://127.0.0.1:3000
‘/api’: {
target: ‘http://127.0.0.1:3000’,
// secure: false,// 如果是https接口,需要配置这个参数
// ws: true, //是否代理websockets, 默认值为true
/\*
changeOrigin设置为true时,服务器收到的请求头中的host为:localhost:3000
changeOrigin设置为false时,服务器收到的请求头中的host为:localhost:8080
changeOrigin默认值为true
*/
changeOrigin: true, // 设置请求头中的host地址,默认值为true //地址中的 /api 仅仅是一个请求转发标志,真正的接口中没有/api,所以在转发时重写请求路径,把/api删掉。 pathRewrite: {'^/api' : ''} }, // 代理2 '/douyu':{ target: 'http://open.douyucdn.cn', pathRewrite: {'^/douyu' : ''} }}
}
#### 设置多个代理
const { defineConfig } = require(‘@vue/cli-service’)
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave: false, //是否使用link检查代码
devServer: {
//方式二:设置多个代理
proxy:{
//这个路径为http://192.168.1.182:3000/douyu/wgapi/vod/front/vodrank/getTagVideos
‘/douyu’:{
//target是代理的目标路径
target:“http://192.168.1.182:3000”,
//pathRewrite重写请求的路径,实际请求的路径没有代理标识douyu,需要把斗鱼重置为空字符串
pathRewrite:{‘^/douyu’:‘’}
},
//这个路径为http://192.168.1.182:3000/huya/wgapi/vod/front/vodrank/getTagVideos
‘/huya’:{
//target是代理的目标路径
target:“http://192.168.1.182:3000”,
//pathRewrite重写请求的路径,实际请求的路径没有代理标识douyu,需要把斗鱼重置为空字符串
pathRewrite:{‘^/huya’:‘’}
}
}
}
});
#### 发送ajax请求的方法使用
getData() {//douyu代理 axios.post('http://localhost:8080/douyu/wgapi/vod/front/vodrank/getTagVideos', { tagId: 0 }).then(res => { console.log('res.data:', res.data); });//huya代理 axios.post('http://localhost:8080/huya/wgapi/vod/front/vodrank/getTagVideos', { tagId: 0 }).then(res => { console.log('res.data:', res.data); });},
### 最后小编综合了阿里的面试题做了一份前端面试题PDF文档,里面有面试题的详细解析**[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**![](https://img-blog.csdnimg.cn/img_convert/45f2869b91b538dd3bb3290ba13bc806.png) ![](https://img-blog.csdnimg.cn/20210419193354991.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0tlcGxlcl9JSQ==,size_16,color_FFFFFF,t_70)虽只说了一个公司的面试,但我们可以知道大厂关注的东西并举一反三,通过一个知识点延伸到另一个知识点,这是我们要掌握的学习方法,小伙伴们在这篇有学到的请评论点赞转发告诉小编哦,谢谢大家的支持!,t_70)虽只说了一个公司的面试,但我们可以知道大厂关注的东西并举一反三,通过一个知识点延伸到另一个知识点,这是我们要掌握的学习方法,小伙伴们在这篇有学到的请评论点赞转发告诉小编哦,谢谢大家的支持!
上一篇: 【Flutter】webview_flutter使用详解
下一篇: 【前端】代码警告处理Parsing error: Unexpected token <eslint或Parsing error: Unexpected token =eslint
本文标签
声明
本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。