在vue-cli版本为2.x的情况下修改webpack.dev.conf.js中的devServer对象加入disableHostCheck: true
devServer: {
disableHostCheck: true,
}
devServer: {
disableHostCheck: true,
}vue-cli版本3.0的情况下修改vue.config.js的配置
module.exports = {
devServer: {
disableHostCheck: true
}
}
module.exports = {
devServer: {
disableHostCheck: true
}
}补充知识：vue中使用wangeditor富文本编辑器补充知识：补充知识：vue中使用wangeditor富文本编辑器1.先下载 编辑器1.先下载 编辑器
cnpm install wangeditor --save
cnpm install wangeditor --save2.用法：2.用法：2.1、html用来放编辑器

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();
},
}
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问题就是小编分享给大家的全部内容了，希望能给大家一个参考。