解决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 相关文章推荐
jQuery 操作下拉列表框实现代码
Feb 22 Javascript
jquery的Theme和Theme Switcher使用小结
Sep 08 Javascript
JS判定是否原生方法
Jul 22 Javascript
event对象获取方法总结在google浏览器下测试
Nov 03 Javascript
基于jquery实现的可编辑下拉框实现代码
Aug 02 Javascript
JS实现的最简Table选项卡效果
Oct 14 Javascript
原生js实现验证码功能
Mar 16 Javascript
$.browser.msie 为空或不是对象问题的多种解决方法
Mar 19 Javascript
JS排序之选择排序详解
Apr 08 Javascript
Angular中使用MathJax遇到的一些问题
Dec 15 Javascript
vue页面切换过渡transition效果
Oct 08 Javascript
JavaScript实现美化滑块效果
May 17 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实现在服务器上创建目录的方法
2015/03/16 PHP
php检查日期函数checkdate用法实例
2015/03/19 PHP
Convert Seconds To Hours
2007/06/16 Javascript
javascript appendChild,innerHTML,join性能比较代码
2009/08/29 Javascript
CCPry JS类库 代码
2009/10/30 Javascript
jquery获取下拉列表的值为null的解决方法
2011/03/18 Javascript
Javascript 倒计时源代码.(时.分.秒) 详细注释版
2011/05/09 Javascript
IE6浏览器中window.location.href无效的解决方法
2014/11/20 Javascript
node.js中的fs.fstatSync方法使用说明
2014/12/15 Javascript
Jquery中$.post和$.ajax的用法小结
2015/04/28 Javascript
JS实现网页上随机产生超链接地址的方法
2015/11/09 Javascript
浅谈js基本数据类型和typeof
2016/08/09 Javascript
js注入 黑客之路必备!
2016/09/14 Javascript
html中鼠标滚轮事件onmousewheel的处理方法
2016/11/11 Javascript
Javascript基础回顾之(一) 类型
2017/01/31 Javascript
详解JS异步加载的三种方式
2017/03/07 Javascript
详解从新建vue项目到引入组件Element的方法
2017/08/29 Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
2017/12/07 Javascript
Vue 实现手动刷新组件的方法
2019/02/19 Javascript
Node.js之readline模块的使用详解
2019/03/25 Javascript
用node.js写一个jenkins发版脚本
2019/05/21 Javascript
React 全自动数据表格组件——BodeGrid的实现思路
2019/06/12 Javascript
js实现轮播图效果 z-index实现轮播图
2020/01/17 Javascript
Vue和React有哪些区别
2020/09/12 Javascript
vue切换菜单取消未完成接口请求的案例
2020/11/13 Javascript
[03:17]史诗级大片应援2018DOTA2国际邀请赛 致敬每一位坚守遗迹的勇士
2018/07/20 DOTA
Python下opencv图像阈值处理的使用笔记
2019/08/04 Python
Python爬取智联招聘数据分析师岗位相关信息的方法
2019/08/13 Python
使用CSS变量实现炫酷惊人的悬浮效果
2019/04/26 HTML / CSS
师德演讲稿范文
2014/05/06 职场文书
技能比武方案
2014/05/21 职场文书
渠道运营商合作协议书范本
2014/10/06 职场文书
培训督导岗位职责
2015/04/10 职场文书
职工宿舍管理制度
2015/08/05 职场文书
2019最新激励员工口号大全!
2019/06/28 职场文书
分享五个Node.js开发的优秀实践 
2022/04/07 NodeJs