首页 > 其他分享 >vue3 多服务器域名跨域代理和请求配置

vue3 多服务器域名跨域代理和请求配置

时间:2024-05-14 17:20:23浏览次数:25  
标签:http 跨域 域名 接口 xx vue3 true

多服务器域名的跨域配置:
同样是在vue.config.js文件中对devServer.proxy进行配置,如下:

const {defineConfig} = require('@vue/cli-service')
module.exports = defineConfig({
    transpileDependencies: true,
    lintOnSave: false, //关闭eslint检查,
    devServer: {
        proxy: {
            //配置服务器地址一
            '/apis': {
                // target: 'http://xx.xx.xx.xx:8001', //lcoal 接口域名
                // target: 'http://xx.xx.xx.xx:7088', //dev 接口域名
                target: 'http://xx.xx.xx.xx:8088', //real 接口域名
                changeOrigin: true,             //是否跨域
                ws: true,                       //是否代理 websockets
                secure: true,                   //是否https接口
                pathRewrite: {                  //路径重置
                    '^/apis': ''
                }
            },
            //配置服务器地址二
            '/externalApis': {
                target: 'http://xx.xx.xx.xx:8000', //外部接口域名
                changeOrigin: true,             //是否跨域
                ws: true,                       //是否代理 websockets
                secure: true,                   //是否https接口
                pathRewrite: {                  //路径重置
                    '^/externalApis': ''
                }
            }
        }
    }

})

 

标签:http,跨域,域名,接口,xx,vue3,true
From: https://www.cnblogs.com/pingguomang/p/18191773

相关文章

  • 跨域
    当你的协议、域名、端口三者任一与当前url不一致的时候,就会出现跨域问题(浏览器的同源策略)1.Jsonp主要利用scrpt不用同源策略的影响,但是只支持get请求(目前非主流)2.CORS(主要依赖于后端)分为简单请求和非简单请求简单请求1.请求方式为GET、POST、HEAD;2.Content-Type为applicati......
  • vue3+ts+elementPlus项目搭建
    1.cmd+R  查看是否安装node环境和vue,node-v  出现版本号如果没有,去下载安装,地址: Node.js—DownloadNode.js®(nodejs.org)vue-V   出现版本号如果没有, 输入命令行,全局安装或升级脚手架npminstall-g@vue/cli2.创建vue项目  (项目名......
  • VUE3.0 中如何使用SVG图标
    1.文件下新建SvgIcon文件夹以及子文件index.js,index.vue,svg文件夹(用于存放svg图片) 2.编写index.vue组件<template><svg:class="svgClass"aria-hidden="true"><use:xlink:href="iconName"/></svg></template><......
  • vue3编译优化之“静态提升”
    前言在上一篇vue3早已具备抛弃虚拟DOM的能力了文章中讲了对于动态节点,vue做的优化是将这些动态节点收集起来,然后当响应式变量修改后进行靶向更新。那么vue对静态节点有没有做什么优化呢?答案是:当然有,对于静态节点会进行“静态提升”。这篇文章我们来看看vue是如何进行静态提升的......
  • 今天学了vue3的composition API
    代码量:60左右时间:1h搏客量:1<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><linkrel="icon"href="/favicon.ico"><metaname="viewport"content="wi......
  • 【vue3入门】-【22】 组件生命周期
    组件生命周期每个Vue组件实例在创建是都需要经历一系列的初始化步骤,比如设置好数据侦听,编译模版,挂载实例到DOM,以及在数据改变时更新DOM。在此过程中,它也会运行被称为生命周期钩子的函数,让开发者有机会在特定阶段运行自己的代码。生命周期函数都是会自己执行app.vue<template>......
  • Vue3学习(二十四)- 文档页面功能开发
    写在前面这部分真的感觉超级难,其实也不能说难,主要是真的想不到这个思路应该这么做,或者说他好厉害,他怎么知道该这么设计实现。说下难点吧,我觉得后天逻辑还好,主要是前端部分真的需要点花点时间来思考,比如布局、交互设计的实现等等。文档页面功能开发1、任务拆解增加文档页面,......
  • Vue3得通信方式
    1父向子props(defibeProps),子向父自定义事件(defineEmits)2时间总线(mitt插件)3v-model(可以绑定多个v-model)a给子组件传递props[modelValue]b给子组件传递自定义事件@update:modelValue列子:<Childv-model:name="name"v-model:sex="sex>4useAttrs(引入useAttr......
  • vue3 - App.vue示例1
    示例1App.vue<!--插入Vue库的CDN链接--><scriptsrc="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script><scriptsetup>importHelloWorldfrom'./components/HelloWorld.vue'</script><templa......
  • 生命周期---Vue2&Vue3
    生命周期---Vue2&Vue3简单理解为:组件从创建到被销毁的一个过程,就相当于人的一生,从出生到死亡的一个过程。组件的生命周期也称生命周期、生命周期函数、生命周期钩子生命周期在特定的时刻会调用特定的函数生命周期分为四个阶段,每个阶段都有两个钩子,现只讨论这八个钩子V......