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

在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>

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问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue使用路由钩子拦截器beforeEach和afterEach监听路由

    在路由跳转的时候,我们需要一些权限判断或者其他操作.这个时候就需要使用路由的钩子函数. 定义:路由钩子主要是给使用者在路由发生变化时进行一些特殊的处理而定义的函数. 总体来讲vue里面提供了三大类钩子,两种函数 1.全局钩子 2.某个路由的钩子 3.组件内钩子 两种函数: 1. router.beforeEach(function(to,form,next){}) /*在跳转之前执行*/ 2. router.afterEach(function(to,form)}{}) /*在跳转之后判断*/

  • Vue实现Header渐隐渐现效果的实例代码

    新建header.vue组件 引入到父组件Detail.vue中 header.vue 通过router-link标签设置to属性为地址,实现点击返回首页 tag标签设为div,就有了div的属性 <template> <div class="header"> <router-link tag="div" to="/" class="header-abs"> <div class=&q

  • vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能

    随着前端技术的飞速发展,大数据时代的来临,我们在开发项目时越来越多的客户会要求我们做一个数据展示的大屏,可以直观的展示用户想要的数据,同时炫酷的界面也会深受客户的喜欢. 大屏展示其实就是一堆的图表能够让人一目了然地看到该系统下的一些基本数据信息的汇总,也会有一些实时数据刷新,信息预警之类的.笔者在之前也做过一些大屏类的数据展示,但是由于都是一些图表类的,觉得没什么可说的,加之数据也都牵扯到公司,所以没有沉淀下来什么. 最近有朋友要做一个大屏,问了自己一个问题,自己也刚好做了一个简单的大屏数据展示

  • vue 封装面包屑组件教程

    我看过一篇关于程序员写博客的文章,他说很多的程序员过了两年写了很多的代码,但是回想起来自己具体做了哪些技术点,遇到坑几乎没有印象,所以说文字是记录的最好方式,好记性不如烂笔头,可以方便自己以后查看,在写的过程中也会再加深一遍印象,我也来折腾折腾. 第一次写文章就写一个比较有意义的吧,18年四月末来到目前所在的这家公司,熟悉了一周环境和代码后,新的任务就是使用vue+element-ui来重构之前老版本的项目,我主要负责就是用户管理的一个模块,因为之前没有用过vue所以恶补了一周的vue了解了一些

  • Vue 实现拨打电话操作

    我就废话不多说了,大家还是直接看操作吧~ <p>联系电话:<a :href="'tel:' + item.phone" rel="external nofollow" >{{item.phone}}</a></p> 补充知识:vue移动项目中如何设置点击手机号码就唤起拨号功能 1.在vue项目的index.html中添加如下代码: <meta name="format-detection" c

  • vue的webcamjs集成方式

    记一次在vue中使用webcamjs调取pc端摄像头拍照 说明 本例调用摄像头基于webcamjs 第一步: Photo.vue 组件 <template> <div> <div id="results">Your captured image will appear here...</div> <h1>WebcamJS Test Page</h1> <h3>Demonstrates simple 32

  • Vue基于localStorage存储信息代码实例

    一 什么是localStorage 对浏览器来说,使用 Web Storage 存储键值对比存储 Cookie 方式更直观,而且容量更大,它包含两种:localStorage 和 sessionStorage sessionStorage(临时存储) :为每一个数据源维持一个存储区域,在浏览器打开期间存在,包括页面重新加载 localStorage(长期存储) :与 sessionStorage 一样,但是浏览器关闭后,数据依然会一直存在 所以上次使用cookie的时候就遇到了一个坑,设置后马上

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

    在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.先下载 编辑器 cn

  • 解决vue项目中某一页面不想引用公共组件app.vue的问题

    Vue 单页面应用 把公共组件放在 app.vue 但是我希望某个页面没有这些公共组件怎么办(比如登陆页面)每个页面都有 导航栏 但是我希望 登陆页面只有一个背景色和一个登陆框 没有导航栏 那应该怎样设置呢? vue中文文档:点击进入 在根组件中:在导航栏使用v-show判断当前路由是否是不需要的组件来完成页面: <template> <div id="app"> <home-header v-show="!(path ==='/') "

  • 解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题

    在项目中遇到后台数据还没有加载完毕,但是页面上调用了后台数据中的字段,这样就会报undefined. 例如:一进入页面直接回显数据. 我在created里面请求接口进行赋值 this.matterAll=[]; 会报accessItemName为undefined: 原因以及解决办法: 在上面data()中,我定义了matterAll:[],也就是空的数组, template中,我又直接用了this.matterAll[0],这个时候this.matterAll[0]=undefined,所以t

  • 解决Vue项目中tff报错的问题

    在webpack.config.js中的模块配置中加如下的配置规则: {test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, use: "url-loader"} const path = require('path'); const htmlWebpackplugin = require('html-webpack-plugin'); const VueLoaderPlugin = require('vue-loader/lib/plugin'); modu

  • 解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题

    如下所示: 解决办法: 删掉项目中node_modules文件夹 ; 然后再 重新下载一下 cnpm install 补充知识:vue在npm run dev时报错Error: Cannot find module 'xxx' 今天在做项目时出现了下面这个错误,找了很多博客,都说改一下代码写法就行了.不过视情况而定,有点时候有些代码改起来很麻烦,千丝万缕的关系,不是说改一下代码就行了的. 然后就试了很多方法,最后发现是node版本的原因,当时用的是node的最新版本@14.6.0,个人认为是新版

  • vue-cli npm如何解决vue项目中缺失core-js的问题

    目录 vue-cli npm解决vue项目中缺失core-js 报错 原因 解决办法 vue踩坑:this dependency was not found 问题背景 vue-cli npm解决vue项目中缺失core-js 报错 This dependency was not found: core-js/modules/es.object.to-string in ./src/router/index.jsTo install it, you can run: npm install --s

  • 解决vue项目中type=”file“ change事件只执行一次的问题

    问题描述 在最近的项目开发中遇到了这样的一个问题,当我上传了一个文件时,我将获取到的文件名清空后,却无法再次上传相同的文件 <template> <div class="hello"> <input type="button" value="上传文件" name="" id="" @click="updata"> <input type=&quo

  • Vue 项目中遇到的跨域问题及解决方法(后台php)

    Vue 项目中遇到的跨域问题及解决方法(后台php)

    问题描述 前端 vue 框架,后台 php,百度跨域问题后台加这段代码 header("Access-Control-Allow-Origin: *"); 加了之后报这个错: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The valu

  • Vue项目中该如何解决跨域问题

    目录 跨域 同源策略 express服务器 vue处理跨域 express处理跨域 总结 跨域 跨域报错是前端开发中非常经典的一个错误,报错如下 Access to XMLHttpRequest at '......' from origin  '......' has been blocked by CORS policy:  No 'Access-Control-Allow-Origin' header is present on the requested resource. 跨域错误源自

  • 解决在vue项目中,发版之后,背景图片报错,路径不对的问题

    解决方法: 在utils.js里边的 加上publicPath:'../../', 在引入图片或者背景图的时候,使用方法: 以上这篇解决在vue项目中,发版之后,背景图片报错,路径不对的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: 关于Vue背景图打包之后访问路径错误问题的解决 vue-cli中打包图片路径错误的解决方法 关于vue.js发布后路径引用的问题解决 vue cli使用绝对路径引用图片问题的解决 详解vue-cil和webp

随机推荐