精华内容
下载资源
问答
  • vue配置多个跨域

    2021-04-13 19:36:06
    但是如果遇到了需要多个跨域该怎么办呢 在vue.config.js配置如下 devServer: { // ... code proxy: { // 第一个跨域 "/api": { target: "代理地址", // 跨域的地址 changeOrigin: true, // 是否开启...
    • 通常在vue的项目中一个跨域足够
    • 但是如果遇到了需要多个跨域该怎么办呢
    • 在vue.config.js配置如下
    devServer: {
    	// ... code
    	proxy: {
    		// 第一个跨域
    		"/api": {
    			target: "代理地址", // 跨域的地址
    			changeOrigin: true, // 是否开启跨域
    			pathRewrite: { // 路径重写
    				"^api": ""
    			}
    		},
    		// 第二个跨域
    		"/dev": {
    			target: "代理地址",
    			changeOrigin: true,
    			pathRewrite: {
    				"/dev": ""
    			}	
    		},
    		// 以此类推
    	}
    }
    
    • axios.get(’/api…’)
    • axios.get(’/dev…’)
    • 注意问题
    • 配置完代理后一定要重启项目,否则代理不生效
    • 如果对axios进行了二次封装,请把axios的baseUrl的值改为空,否则就会在netWork中发现请求的地址会成为 …/api/dev…
    展开全文
  • vue设置多个接口跨域代理

    千次阅读 2020-11-04 21:11:55
    // vue的配置文件 module.exports = { devServer: { proxy: { '/zz': { ws: true, target: 'http://api.map.baidu.com/telematics/v3', changeOrigin: true, pathRewrite: {
    // vue的配置文件
    module.exports = {
        devServer: {
            proxy: {
                '/zz': {
                    ws: true,
                    target: 'http://api.map.baidu.com/telematics/v3',
                    changeOrigin: true,
                    pathRewrite: {
                        '^/zz': '/'
                    }
                },
                '/api': {
                    ws: true,
                    target: 'https://www.liulongbin.top:8888/api/private/v1',
                    changeOrigin: true,
                    pathRewrite: {
                        '^/api': '/'
                    }
                },
            }
        }
    }
    

    注意:代理配置完成,要重新打开项目,不然代理不生效。重新启动。

    展开全文
  • 1、配置多个代理 devServer: { host: '0.0.0.0', port: port, proxy: { [process.env.VUE_APP_BASE_API]: {//配置1 target: `http://192.168.0.114:8088`,//本地后端接口 changeOrigin: true, pathRewrite: ...
    本地项目需要下载阿里云上的文件,而且需要前端下载后打包
    
    1、配置多个代理
    
    devServer: {
        host: '0.0.0.0',
        port: port,
        proxy: {
          [process.env.VUE_APP_BASE_API]: {//配置1
            target: `http://192.168.0.114:8088`,//本地后端接口
            changeOrigin: true,
            pathRewrite: {
              ['^' + process.env.VUE_APP_BASE_API]: ''
            }
          },
          '/oa': {//配置2
            target: 'http://hsh-dongyu.oss-cn-beijing.aliyuncs.com/',  //目标接口域名
            pathRewrite: {
              '^/oa': '/oa'   //重写接口
            },
            changeOrigin: true,  //是否跨域
          },
        },
        disableHostCheck: true
    },
    
    2、代理地址
    http://hsh-dongyu.oss-cn-beijing.aliyuncs.com/oa/1608795278991/%25E5%2593%25A6%25E5%259A%25AF%25E5%259A%25AF.docx?Expires=1924154962&OSSAccessKeyId=LTAI4G2mj8FUZ9g8xRrKSCV1&Signature=MUFTmuL8BiA0335HK0D94QrXGxxxxxxx
    http://hsh-dongyu.oss-cn-beijing.aliyuncs.com/oa/1608795278991/%25E5%2593%25A6%25E5%259A%25AF%25E5%259A%25AF.docx?Expires=1924154962&OSSAccessKeyId=LTAI4G2mj8FUZ9g8xRrKSCV1&Signature=MUFTmuL8BiA0335HK0D94QrXGxxxxxxx
    
    3、修改地址,使其匹配代理
    
    var url1 = '上面地址1';
    var url2 = '上面地址2';
    url2 = url2.slice(url2.indexOf('/oa')) //'/oa/1608795278991/%25E5%2593%25A6%25E5%259A%25AF%25E5%259A%25AF.docx?Expires=1924154962&OSSAccessKeyId=LTAI4G2mj8FUZ9g8xRrKSCV1&Signature=MUFTmuL8BiA0335HK0D94QrXGxxxxxxx'
    url2 = url2.slice(url2.indexOf('/oa'))//'/oa/1608795278991/%25E5%2593%25A6%25E5%259A%25AF%25E5%259A%25AF.docx?Expires=1924154962&OSSAccessKeyId=LTAI4G2mj8FUZ9g8xRrKSCV1&Signature=MUFTmuL8BiA0335HK0D94QrXGxxxxxxx'
    //上面地址修改后就能够正常代理了
    
    4、安装下载打包的依赖包
    npm add axios
    npm add jszip
    npm add file-saver
    5、封装下载方法
    
    import axios from 'axios'
    import JSZip from 'jszip'
    import FileSaver from 'file-saver'
    const getFile = url => {
        return new Promise((resolve, reject) => {
            axios({
                method:'get',
                url,
                responseType: 'blob',
                // headers: {'Content-Type': 'multipart/form-data'}
            }).then(data => {
                resolve(data.data)
            }).catch(error => {
                reject(error.toString())
            })
        })
    }
    export default {
    	methods: {
    		handleBatchDownload() {
                const data = [url1 , url2] // 需要下载打包的路径
                const zip = new JSZip()
                const cache = {}
                const promises = []
                data.forEach(item => {
                    const promise = getFile(item).then(data => { // 下载文件, 并存成ArrayBuffer对象
                        const arr_name = item.split("/") //根据业务需求来修改文件名称,不同项目文件名称获取方法不尽相同。
                        const file_name = arr_name[arr_name.length - 1] // 获取文件名
                        zip.file(file_name, data, { binary: true }) // 逐个添加文件
                        cache[file_name] = data
                    })
                    promises.push(promise)
                })
                Promise.all(promises).then(() => {
                    zip.generateAsync({type:"blob"}).then(content => { // 生成二进制流
                        FileSaver.saveAs(content, "打包下载.zip") // 利用file-saver保存文件
                    })
                })
    	}
    }
    
    6、执行handleBatchDownload()方法即可打包下载
    7、注意:
    	1.文件名称需要根据项目来修改,当文件名称后缀为正确的文件后缀时,则表示修改成功。
    	2.下载方法执行时 403则为跨域了说明跨域匹配失败,其他问题根据业务需求修改下载方法。
    
    8、参考文章
    	https://www.mmxiaowu.com/article/59b23f5d5b06a403cf687ed6
    	https://blog.csdn.net/weixin_34185512/article/details/93916884?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-2.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-2.control
    	https://blog.csdn.net/liwan_1219/article/details/103879821
    
    展开全文
  • // vue的配置文件 module.exports = { devServer: { proxy: { '/zz': { ws: true, target: 'http://api.map.baidu.com/telematics/v3', changeOrigin: true, pathRewrite: {
    // vue的配置文件
    module.exports = {
        devServer: {
            proxy: {
                '/zz': {
                    ws: true,
                    target: 'http://api.map.baidu.com/telematics/v3',
                    changeOrigin: true,
                    pathRewrite: {
                        '^/zz': '/'
                    }
                },
                '/api': {
                    ws: true,
                    target: 'https://www.liulongbin.top:8888/api/private/v1',
                    changeOrigin: true,
                    pathRewrite: {
                        '^/api': '/'
                    }
                },
            }
        }
    }
    

    注意:代理配置完成,要重新打开项目,不然代理不生效。

    展开全文
  • Vue项目域名跨域

    2019-05-28 17:03:00
    Vue项目中请求后台数据时,遇到的域名跨域问题。 直接上代码: assetsSubDirectory: "static", assetsPublicPath: "/", proxyTable: { "/api": { target: "path1", changeOrigin: true, //改变...
  • vue跨域多个代理设置

    千次阅读 2020-04-03 17:28:46
    在config index.js module.exports 下面的dev里面配置域名代理 proxyTable: { '/api1': { target: '域名1请求地址', changeOrigin: true, pathRewrite: { '^/api1':'/' } }, '/api2': { target: '域名2...
  • 在基于vue-cli的项目中,在开发环境配置(config/dev.env.js)中设置代理,能够将所有/apidomain开头的请求都通过npm run dev启动的express服务器重定向到目标接口 官方文档:...
  • vue代理设置和解决跨域

    万次阅读 2018-02-26 11:06:15
    前言我们在使用vue-cli启动项目...我们可以在vue-cli配置文件里面设置代理,跨域的方法有很,通常需要后台来进行配置。我们可以直接通过node.js代理服务器来实现跨域请求。vue proxyTable接口跨域请求调试在v...
  • vue-cli3跨域配置

    2020-05-18 22:33:41
    vue-cli3跨域配置vue-cli3跨域配置方法添加vue.config.js接口调用案例nginx反向代理 vue-cli3跨域配置 版本是vue-cli3, 学习途中遇到跨域问题: 方法 添加vue.config.js 代码如下 module.exports = { baseUrl: '....
  • ajax 跨域请求 vue-resource jsonp跨域

    万次阅读 多人点赞 2016-12-24 14:11:21
    ajax 跨域请求 vue-resource jsonp跨域最近在学习vue.js 碰到ajax跨域请求的问题,之前知道可以用jsonp解决,但是一直没实践过,这次用发现里面好多问题,所以现在记录下来,希望可以给刚接触使用jsonp的同学一点...
  • Vue-Cli配置跨域代理

    2021-07-29 15:48:59
    Vue-Cli配置跨域代理 实现目标:通过配置vue-cli的代理解决...开发环境的跨域,也就是在**vue-cli脚手架环境下开发启动服务时,我们访问接口所遇到的跨域问题,vue-cli为我们在本地开启了一服务,可以通过这服务帮
  • Vue3.0 代理解决跨域

    2021-09-06 13:29:08
    使用代理解决跨域,方便的是不需要后端配置cors跨域,而且在使用elementui部分组件不会出那么错。例如:上传组件跨域请求。但是由于使用代理方式请求,会出现另外的问题: 1. 请求session不一致;2. cookie信息无法...
  • Vue项目,因为前后端分离,所以在请求后端接口时,时常遇到跨站问题, ...2、如果前后端部署在同一域名,就不会有跨域问题,但一般是生产环境部署是同一域名下,但在开发环境时,并不是同域名呀,所...
  • vue 配置proxy 解决跨域

    2021-03-29 14:13:55
    前言:现在开发大多是前后端分离,在调接口调时候,必然会出现跨域的问题,可以后台配置解决,也可以前端配置。vue 最常用的就是配置proxy 来解决。具体如下: 1)首先在最外层新建vue.config.js 。在里面配置。...
  • VUE:跨域设置

    万次阅读 2017-03-20 01:29:13
    相信很小伙伴在开发过程中遇到比较头疼的事情之一,就是...接下来,我将就我遇到的问题以及解决方式与众位小伙伴分享~(掌声~)在此项目中,我使用了vue的脚手架,vue-cli,跨域设置在config文件夹下的index.js中。
  • vue-resource 解决跨域问题

    千次阅读 2018-11-30 20:32:37
    vue-resource 解决跨域问题 在对项目进行打包之后,我把数据也放到了我的网站上,然后使用vue-resource 请求数据,这里就出现了“No ‘Access-Control-Allow-Origin’ header is present on the requested resource...
  • vue-cli axios跨域

    2018-12-29 17:28:51
    关于vue-cli使用axios的跨域问题 我卡了半小时,就是很细节撒花姑娘没有处理好造成的 下面贴代码 proxyTable: { ‘/index’:{ target:’ ‘, changeOrigin:true, pathRewrite:{ ‘^/index’: ‘/index’ } } }, ...
  • Vue组件中如何引入iframe?export default {data () {return {src: '你的src'}}}如上,直接通过添加iframe标签,src属性绑定data中的src,第一步引入就完成了vue如何获取iframe对象以及iframe内的window对象?在vue...
  • vue-cil 4 跨域配置

    2020-11-01 12:51:03
    vue-cil3 跨域配置 首先在package.json 同级目录下新建一个vue.config.js文件 配置代码如下 module.exports = { publicPath: "/", // 部署应用包时的基本 URL outputDir: "dist", // npm run build 生成的文件夹...
  • java跨域过滤器解决vue前后端分离跨域问题 package com.yoso.filter; import javax.servlet.*; import javax.servlet.annotation.WebFilter; import javax.servlet.http.HttpServletRequest; import javax.servlet....
  • vue中前端配置跨域

    2021-01-09 12:21:07
    1、在整个项目根目录下创建vue.config.js,这文件,然后写入 const path = require('path') const debug = process.env.NODE_ENV !== 'production' module.exports = { baseUrl: '/', // 根域上下文目录 ...
  • 通常在跨域时会涉及到从某个固定的服务器获取数据,比如计划信息从计划接口服务器获取(主要的跨域地址),但是天气信息从固定的气象接口服务器获取,图片信息从图片接口服务器获取,此时不能用原来的默认模式 ...
  • Vue Axios封装 和 跨域问题

    千次阅读 2020-08-08 11:12:47
    Vue Axios封装和跨域问题 封装 Axios 对象 因为在很项目中很组件都需要通过 Axios 发送异步请求,所以封装一 Axios 对象,自己封装的 Axios 在后续可以使用 axios 中提供的拦截器。 安装 npm install axios 1...
  • Vue反向代理解决跨域

    2021-02-26 17:33:06
    废话不说,直接上配置,VUE版本:2.6.10 网上介绍的也大都是上边的这配置,但我配上一直不可以,直到看到这issues 关键所在:.env.development中的VUE_APP_BASE_API 如果为空,切配置了vue.config.js,则会走...
  • 现在基本项目都是实行前后端分离的原则,不管是ng 或者是vue 在开发中都无法避免跨域的这问题 本人刚上手第一个vue项目,在调用api的时候出现了跨域的这问题 这是封装好一简单的post 请求...
  • vue配置代理处理跨域

    千次阅读 2020-07-03 11:27:40
    axios访问多个服务器地址请求数据 在vue.config.js里配置 devServer: { proxy: { '/api': { target: "http://www.baidu.com", changeOrigin: true, secure: false, pathRewrite: { "^/api": "" ...
  • 做前端开发的工程师都知道,在调用后端接口的同时可能遇到跨域的问题,需要我们前端处理一下跨域的问题,经过一番百度之后,发现都不太可靠,现在我把设置跨域成功的案例发出来给大家参考参考! 一、在VUE框架的根...
  • vue开发中的跨域处理

    2018-12-05 11:59:41
    前端开发中的跨域处理方式有很,jsonp、服务端配置、nginx代理等等。本文中这些都不涉及,这里主要记录下载vue开发中遇到的跨域问题,以及在使用webpack代理处理跨域遇到的一些问题。 vue开发中遇到跨域问题,最...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 18,937
精华内容 7,574
关键字:

vue设置多个跨域

vue 订阅