解决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 相关文章推荐
用cookies实现的可记忆的样式切换效果代码下载
Dec 24 Javascript
jquery验证手机号码、邮箱格式是否正确示例代码
Jul 28 Javascript
再分享70+免费的jquery 图片滑块效果插件和教程
Dec 15 Javascript
jQuery中ajax的get()方法用法实例
Dec 26 Javascript
JS实现文字链接感应鼠标淡入淡出改变颜色的方法
Feb 26 Javascript
JQuery控制Radio选中方法分析
May 29 Javascript
JavaScript调用传递变量参数的相关问题及解决办法
Nov 01 Javascript
关于验证码在IE中不刷新的快速解决方法
Sep 23 Javascript
js获取一组日期中最近连续的天数
May 25 Javascript
17道题让你彻底理解JS中的类型转换
Aug 08 Javascript
JavaScript实现京东放大镜效果
Dec 03 Javascript
vue的$http的get请求要加上params操作
Nov 12 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
支付宝服务窗API接口开发php版本
2016/07/20 PHP
浅谈PHP实现大流量下抢购方案
2017/12/15 PHP
PHP实现redis限制单ip、单用户的访问次数功能示例
2018/06/16 PHP
JavaScript的面向对象方法以及差别
2008/03/31 Javascript
JavaScript DOM 学习第五章 表单简介
2010/02/19 Javascript
利用JQuery和JS实现奇偶行背景颜色自定义效果
2012/11/19 Javascript
通过js获取div的background-image属性
2013/10/15 Javascript
详解JavaScript正则表达式中的global属性的使用
2015/06/16 Javascript
深入解析JavaScript中的arguments对象
2016/06/12 Javascript
JS添加删除DIV的简单实例
2016/07/08 Javascript
Vue.js实战之组件的进阶
2017/04/04 Javascript
微信小程序自定义导航隐藏和显示功能
2017/06/13 Javascript
js截取字符串功能的实现方法
2017/09/27 Javascript
ES6 class的应用实例分析
2019/06/27 Javascript
JS数组Reduce方法功能与用法实例详解
2020/04/29 Javascript
微信小程序实现底部弹出框
2020/11/18 Javascript
Python使用Flask框架同时上传多个文件的方法
2015/03/21 Python
在Python中使用NLTK库实现对词干的提取的教程
2015/04/08 Python
Python AES加密实例解析
2018/01/18 Python
tensorflow更改变量的值实例
2018/07/30 Python
pycharm: 恢复(reset) 误删文件的方法
2018/10/22 Python
python实现浪漫的烟花秀
2019/01/30 Python
python生成带有表格的图片实例
2019/02/03 Python
Python 微信之获取好友昵称并制作wordcloud的实例
2019/02/21 Python
python中时间转换datetime和pd.to_datetime详析
2019/08/11 Python
python制作英语翻译小工具代码实例
2019/09/09 Python
Html5 页面适配iPhoneX(就是那么简单)
2019/09/05 HTML / CSS
数百万免费的图形资源:Freepik
2020/09/21 全球购物
会计助理的岗位职责
2013/11/29 职场文书
法律六进活动方案
2014/03/13 职场文书
本科毕业自我鉴定
2014/03/20 职场文书
学术诚信承诺书
2014/05/26 职场文书
电子商务求职信
2014/06/15 职场文书
中学生纪念九一八事变演讲稿
2014/09/14 职场文书
教师对照四风自我剖析材料
2014/09/30 职场文书
装修安全责任协议书
2016/03/22 职场文书