解决vue项目中出现Invalid Host header的问题


Posted in Javascript onNovember 17, 2020

在vue-cli版本为2.x的情况下修改webpack.dev.conf.js中的devServer对象加入disableHostCheck: true

devServer: {
 disableHostCheck: true,
}

vue-cli版本3.0的情况下修改vue.config.js的配置

module.exports = {
 devServer: {
 disableHostCheck: true
 }
}

补充知识:vue中使用wangeditor富文本编辑器

1.先下载 编辑器

cnpm install wangeditor --save

2.用法:

2.1、html用来放编辑器

<div id="editor">
  <p v-model="info">请输入内容</p>//占位符
 </div>

解决vue项目中出现Invalid Host header的问题

2.2、js部分

var E = require('wangeditor') ; / import E from 'wangeditor'
export default{
 mounted () {
  var editor = new E('#editor');
  editor.customConfig.uploadImgServer = '';//上传图片的后台地址
  editor.customConfig.uploadFileName = 'UploadForm[imageFile]';
  editor.customConfig.uploadImgHooks = {
   before: function (xhr, editor, files) {
    // 图片上传之前触发
    // xhr 是 XMLHttpRequst 对象,editor 是编辑器对象,files 是选择的图片文件
    
    // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
    // return {
    //  prevent: true,
    //  msg: '放弃上传'
    // }
   },
   success: function (xhr, editor, result) {
    // 图片上传并返回结果,图片插入成功之后触发
    // xhr 是 XMLHttpRequst 对象,editor 是编辑器对象,result 是服务器端返回的结果
    console.log(result);
   },
   fail: function (xhr, editor, result) {
    // 图片上传并返回结果,但图片插入错误时触发
    // xhr 是 XMLHttpRequst 对象,editor 是编辑器对象,result 是服务器端返回的结果
    alert('图片插入失败')
    // 图片插入失败时返回
   },
   error: function (xhr, editor) {
    // 图片上传出错时触发
    // xhr 是 XMLHttpRequst 对象,editor 是编辑器对象
    // 此处好像是,访问请求不通的时候,执行的,ajax的error
    console.log('上传出错')
   },
   timeout: function (xhr, editor) {
    // 图片上传超时时触发
    // xhr 是 XMLHttpRequst 对象,editor 是编辑器对象
    console.log('上传超时')
   },
 
   // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式,可使用该配置
   // (但是,服务器端返回的必须是一个 JSON 格式字符串!!!否则会报错)
   customInsert: function (insertImg, result, editor) {
    // 图片上传并返回结果,自定义插入图片的事件(而不是编辑器自动插入图片!!!)
    // insertImg 是插入图片的函数,editor 是编辑器对象,result 是服务器端返回的结果
 
    // 上传成功后,可以监听返回结果,可以处理土图片插入
    if ( result.status==200) {
     insertImg(result.data)
    }else{
     console.log(result.message)
    }
    // 举例:假如上传图片成功后,服务器端返回的是 {url:'....'} 这种格式,即可这样插入图片:
    // console.log(result);
    // var url = result.url
    // insertImg(url)
 
    // result 必须是一个 JSON 格式字符串!!!否则报错
   },
  }
  editor.create();
 }, 
}

以上这篇解决vue项目中的Invalid Host header问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 无符号右移运算符
Apr 17 Javascript
jquery实现居中弹出层代码
Aug 25 Javascript
jquery操作checkbox示例分享
Jul 21 Javascript
JS动态显示表格上下frame的方法
Mar 31 Javascript
在JS方法中返回多个值的方法汇总
May 20 Javascript
BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)
Aug 18 Javascript
Vue.js实现简单动态数据处理
Feb 13 Javascript
Element-UI踩坑之Pagination组件的使用
Oct 29 Javascript
JS/HTML5游戏常用算法之碰撞检测 像素检测算法实例详解
Dec 12 Javascript
了解JavaScript中的选择器
May 24 Javascript
vue draggable resizable gorkys与v-chart使用与总结
Sep 05 Javascript
细述Javascript的加法运算符的具体使用
Oct 18 Javascript
vue的webcamjs集成方式
Nov 16 #Javascript
SpringBoot在yml配置文件中配置druid的操作
Nov 16 #Javascript
详解JavaScript原型与原型链
Nov 16 #Javascript
详解JavaScript执行模型
Nov 16 #Javascript
Vue 实现拨打电话操作
Nov 16 #Javascript
微信小程序实现页面左右滑动
Nov 16 #Javascript
Vertx基于EventBus发送接受自定义对象
Nov 16 #Javascript
You might like
php&amp;java(二)
2006/10/09 PHP
php5.3 goto函数介绍和示例
2014/03/21 PHP
php基于ob_start(ob_gzhandler)实现网页压缩功能的方法
2017/02/18 PHP
基于laravel-admin 后台 列表标签背景的使用方法
2019/10/03 PHP
PhpStorm 如何优雅的调试Hyperf的方法步骤
2019/11/24 PHP
php 中的信号处理操作实例详解
2020/03/04 PHP
JavaScript窗口功能指南之在窗口中书写内容
2006/07/21 Javascript
理解Javascript_08_函数对象
2010/10/15 Javascript
js实现背景图片感应鼠标变化的方法
2015/02/28 Javascript
JavaScript实现点击文本自动定位到下拉框选中操作
2016/06/15 Javascript
Vue.js组件使用开发实例教程
2016/11/01 Javascript
bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法
2017/05/25 Javascript
JavaScript异步上传图片文件的实例代码
2017/07/04 Javascript
vue.js获得当前元素的文字信息方法
2018/03/09 Javascript
VUE中v-on:click事件中获取当前dom元素的代码
2018/08/22 Javascript
vue中axios请求的封装实例代码
2019/03/23 Javascript
微信小程序收货地址API兼容低版本解决方法
2019/05/18 Javascript
JS浏览器BOM常见操作实例详解
2020/04/27 Javascript
python开发之字符串string操作方法实例详解
2015/11/12 Python
python Jupyter运行时间实例过程解析
2019/12/13 Python
Flask和pyecharts实现动态数据可视化
2020/02/26 Python
python函数map()和partial()的知识点总结
2020/05/26 Python
如何在windows下安装配置python工具Ulipad
2020/10/27 Python
好莱坞百老汇御用王牌美妆:Koh Gen Do 江原道
2018/04/03 全球购物
意大利在线眼镜精品店:Ottica Lipari
2019/11/11 全球购物
Michael Kors香港官网:美国奢侈品品牌
2019/12/26 全球购物
大一学生的职业生涯规划书范文
2014/01/19 职场文书
地震捐款倡议书
2014/08/29 职场文书
未婚证明书模板
2014/10/08 职场文书
2014党的群众路线教育实践活动总结报告
2014/10/31 职场文书
交通事故协议书范本
2014/11/18 职场文书
欢迎词怎么写
2015/01/23 职场文书
巴黎圣母院读书笔记
2015/06/26 职场文书
golang elasticsearch Client的使用详解
2021/05/05 Golang
JVM入门之类加载与字节码技术(类加载与类的加载器)
2021/06/15 Java/Android
cypress测试本地web应用
2022/06/01 Javascript