跨域问题

解决思路使用Nginx 插件代理

安装了webpack-dev-server (其实就是个http 服务器) ,并在webpack的配置文件中添加 devserver-proxy 配置
webpack-dev-server

    devServer: {contentBase: path.resolve(__dirname, '../dist'), historyApiFallback: true, inline: true,port:7777,//代理服务器，其实就是nginx 代理插件来处理跨域问题//访问http://localhost:7777/image-test 会  访问  到  http://pic.sc.chinaz.com/image-test//其实 http://pic.sc.chinaz.com 是没有image-test 目录的//so 需要在 pathRewrite 中 把 tmage-test 给 干掉//changeOrigin =true  允许跨域proxy: {'/image-test': {target: 'http://pic.sc.chinaz.com',secure: false,changeOrigin: true,pathRewrite: {'^/image-test' : ''}}}}

axios 的 responseType 属性说明，responseType 就是 服务器响应的数据类型，可以是 ‘arraybuffer’, ‘blob’, ‘document’, ‘json’, ‘text’, ‘stream’

设置值	返回类型
“”：	DOMString (this is the default value)
“arraybuffer”：	ArrayBuffer
“blob”：	Blob（二进制流）
“document”：	Document
“json”：	JSON
“text”：	DOMString

因为是流所以 responseType=blob

 get_image(){axios.get("http://localhost:7777/image-test/files/pic/pic9/201205/xpic4985_s.jpg",{//'blob 为 二进制流responseType:'blob'}).then(response=> {console.log(response.status)if (response.status==200){let img = document.createElement("img");let blob= response.data;img.src = window.URL.createObjectURL(blob);img.height = 60;document.body.appendChild(img); //设置图片的load事件处理器来释放对象URL，当图片加载完成之后对象URL就不再需要了img.onload = function(e) {window.URL.revokeObjectURL(img.src); };}//console.log(response.data);})}

URL.revokeObjectURL 讲解
URL.revokeObjectURL
demo

objectURL = URL.createObjectURL(object);参数 ： object用于创建 URL 的 File 对象、Blob 对象或者 MediaSource 对象。
返回值： 返回一个新的URL对象 这个新的URL 对象表示指定的 File 对象或 Blob 对象

源码 https://gitee.com/sparkzeng/vue-cli

axios 跨域流下载相关推荐

axios库读不到cookie_Vue axios 跨域请求无法带上cookie的解决
Vue axios 跨域请求无法带上cookie的解决在main.js设置 // 携带cookie axios.defaults.withCredentials = true 补充知识:VUE ax ...
vue php axios 跨域,在vue项目中,使用axios跨域处理
下面我就为大家分享一篇在vue项目中,使用axios跨域处理,具有很好的参考价值,希望对大家有所帮助. 跨域,一个很是让人尴尬的问题,有些人可以在后台中设置请求头,但是很多前端并不具备后台的知识,并无 ...
axios跨域请求的qs用法 - qs安装篇
axios跨域请求的qs用法,本文说明如何安装qs vue项目跨域请求post提交方式:先npm install qs --save-dev cmd安装指令: npm install qs 运行安装的 ...
解决vue axios跨域请求发送两次问题
解决vue axios跨域请求发送两次问题参考文章: (1)解决vue axios跨域请求发送两次问题 (2)https://www.cnblogs.com/wordblog/p/12171875. ...
vue-cli3中解决axios跨域问题（以360壁纸为例）
vue-cli3中解决axios跨域问题(以360壁纸为例) 一.先在vue项目文件夹里的根目录中新建 vue.config.js文件(与package.json同一级) 二.在 vue.config ...
解决Axios跨域问题（Axios跨域问题解决方案）
问题背景 Axios是不允许跨域访问的,别说跨域,跨端口都不行.例如某项目我本地vue前端frontEnd为localhost:8889,Java后台 backEnd为localhost:8888 报 ...
Vue之Axios跨域问题解决方案
背景:因为axios中只能使用get和post方法来进行请求数据,没有提供jsonp等方法进行跨域访问数据 axios中文网址:https://www.kancloud.cn/yunye/axios/ ...
electron-vue使用axios跨域解决
一开始查找了vue使用axios跨域的问题如何解决,但是electron-vue中没有config文件夹,后来查找了electron-vue的axios跨域问题在.electron-vue文件夹下d ...
axios请求跨域前端解决_完美解决axios跨域请求出错的问题
错误信息: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Orig ...

axios 跨域流下载

跨域问题

解决思路使用Nginx 插件代理

axios 跨域流下载相关推荐

最新文章

热门文章

axios 跨域 流 下载

跨域 问题

解决思路使用Nginx 插件 代理

axios 跨域 流 下载相关推荐

最新文章

热门文章

axios 跨域流下载

跨域问题

解决思路使用Nginx 插件代理

axios 跨域流下载相关推荐