关于vue-resource报错450的解决方案


Posted in Javascript onJuly 24, 2017

本文介绍了关于vue-resource报错450的解决方案,分享给大家,具体如下:

一、基本使用:

1.页面引入

import vueResource from 'vue-resource'
 Vue.use(vueResource)

2. 调取接口

Vue.http.post(url, {
 'data1': data1,
 'data2': 'data2'
}).then(response => {
 console.log('success', response)
}, response => {
 console.log('error', response)
})

二、报错450

定位错误信息:请求header没有完全一一对应。Content-Type: application/x-www-form-urlencoded; charset=UTF-8应为Content-Type: application/json; charset=UTF-8,检查页面代码,发现已经设置了

Vue.http.interceptors.push(function (request, next) {
 request.headers.set('Content-Type', 'application/json; charset=UTF-8')
 request.headers.set('Content-Type', 'application/json')
 next()
})

只是页面没有起作用而已,那究竟是什么原因导致页面设置的Content-Type失效了呢?继续追溯,发现跟这行代码有关

// Vue.http.options.crossOrigin = true 
 // Vue.http.options.emulateHTTP = true
 Vue.http.options.emulateJSON = true //(跟这行代码有关)

三、分析

下面分别来讲一下这几行代码的用处,以及emulateJSON是怎么影响到Content-Type设置的。

1. Vue.http.options.crossOrigin

这个很明显是设置跨域的,此处不多讲。

2. Vue.http.options.emulateHTTP

参考地址:https://github.com/pagekit/vue-resource/blob/develop/src/http/interceptor/method.js

摘出源码

/**
 * HTTP method override Interceptor.
 */

export default function (request, next) {

  if (request.emulateHTTP && /^(PUT|PATCH|DELETE)$/i.test(request.method)) {
    request.headers.set('X-HTTP-Method-Override', request.method);
    request.method = 'POST';
  }

  next();
}

大概的意思就是如果请求方式为PUT|PATCH|DELETE,服务器又没法处理这几类请求的时候,设置Vue.http.options.emulateHTTP = true的话可以将X-HTTP-Method-Override设置为PUT|PATCH|DELETE,然后使用普通的post进行请求。

关于X-HTTP-Method-Override讲一下,它的使用场景是:

在某些HTTP代理不支持类似PUT|PATCH|DELETE这些类型HTTP请求的情况下,可以通过另一种完全违背协议的HTTP方法来"代理"。这种协议就是,使客户端发出HTTP POST请求并设置header里X-HTTP-Method-Override值为PUT|PATCH|DELETE。

3. Vue.http.options.emulateJSON

参考地址:https://github.com/pagekit/vue-resource/blob/develop/src/http/interceptor/form.js

摘出源码

/**
 * Form data Interceptor.
 */

import Url from '../../url/index';
import { isObject, isFormData } from '../../util';

export default function (request, next) {

  if (isFormData(request.body)) {

    request.headers.delete('Content-Type');

  } else if (isObject(request.body) && request.emulateJSON) {

    request.body = Url.params(request.body);
    request.headers.set('Content-Type', 'application/x-www-form-urlencoded');
  }

  next();
}

从第17行可以看到,如果设置了emulateJSON的话会默认加上这句

request.headers.set('Content-Type', 'application/x-www-form-urlencoded');

这就是为什么我们设置的Content-Type失效了。只要去掉Vue.http.options.emulateHTTP = true 或者直接置为false就可以了。

vue-resource(github)地址:https://github.com/pagekit/vue-resource

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 提升运行速度之循环篇 译文
Aug 15 Javascript
js各种验证文本框输入格式(正则表达式)
Oct 22 Javascript
JS字符串处理实例代码
Aug 05 Javascript
jQuery 无刷新分页实例代码
Nov 12 Javascript
js post提交调用方法
Feb 12 Javascript
JavaScript实现可拖拽的拖动层Div实例
Aug 05 Javascript
js实现具有高亮显示效果的多级菜单代码
Sep 01 Javascript
使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
Mar 22 Javascript
JS简单实现自定义右键菜单实例
May 31 Javascript
微信小程序 开发MAP(地图)实例详解
Jun 27 Javascript
用原生 JS 实现 innerHTML 功能实例详解
Apr 03 Javascript
vue elementUI表格控制对应列
Apr 13 Vue.js
JavaScript中的FileReader图片预览上传功能实现代码
Jul 24 #Javascript
react-router4 嵌套路由的使用方法
Jul 24 #Javascript
关于react-router的几种配置方式详解
Jul 24 #Javascript
简单实现js放大镜效果
Jul 24 #Javascript
Vue列表页渲染优化详解
Jul 24 #Javascript
javascript cookie的基本操作(添加和删除)
Jul 24 #Javascript
JavaScript取得gridview中获取checkbox选中的值
Jul 24 #Javascript
You might like
php下intval()和(int)转换使用与区别
2008/07/18 PHP
深入array multisort排序原理的详解
2013/06/18 PHP
php实现上传图片生成缩略图示例
2014/04/13 PHP
PHP简单的MVC框架实现方法
2015/12/01 PHP
PHP Filter过滤器全面解析
2016/08/09 PHP
详解PHP归并排序的实现
2016/10/18 PHP
php中try catch捕获异常实例详解
2020/08/06 PHP
一端时间轮换的广告
2006/06/26 Javascript
JavaScript版TAB选项卡效果实例
2013/08/16 Javascript
js中prototype用法详细介绍
2013/11/14 Javascript
jQuery实现仿美橙互联两级导航菜单效果完整实例
2015/09/17 Javascript
详解Vue-基本标签和自定义控件
2017/03/24 Javascript
vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
2018/05/13 Javascript
JS实现的JSON序列化操作简单示例
2018/07/02 Javascript
微信小程序使用swiper组件实现层叠轮播图
2018/11/04 Javascript
countup.js实现数字动态叠加效果
2019/10/17 Javascript
微信小程序用户盒子、宫格列表的实现
2020/07/01 Javascript
JavaScript JSON使用原理及注意事项
2020/07/30 Javascript
vant中的toast层级改变操作
2020/11/04 Javascript
分享15个最受欢迎的Python开源框架
2014/07/13 Python
寻找网站后台地址的python脚本
2014/09/01 Python
Python实现从百度API获取天气的方法
2015/03/11 Python
Python修改列表值问题解决方案
2020/03/06 Python
python 5个实用的技巧
2020/09/27 Python
cookies应对python反爬虫知识点详解
2020/11/25 Python
纯CSS3发光分享按钮的实现教程
2014/09/06 HTML / CSS
美国定制钻石订婚戒指:Ritani
2017/12/08 全球购物
英国行业制服供应商:Alexandra
2019/09/14 全球购物
分解成质因数(如435234=251*17*17*3*2,据说是华为笔试题)
2014/07/16 面试题
什么是事务?事务有哪些性质?
2012/03/11 面试题
《寓言两则》教学反思
2014/02/27 职场文书
奥运会口号
2014/06/13 职场文书
撤诉申请怎么写
2015/05/19 职场文书
python实战之90行代码写个猜数字游戏
2021/04/22 Python
在K8s上部署Redis集群的方法步骤
2021/04/27 Redis
python中opencv实现图片文本倾斜校正
2021/06/11 Python