关于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网页关闭时提醒效果脚本
Oct 22 Javascript
JavaScript的单例模式 (singleton in Javascript)
Jun 11 Javascript
utf-8编码引起js输出中文乱码的解决办法
Jun 23 Javascript
浅析javascript闭包 实例分析
Dec 25 Javascript
了解jQuery技巧来提高你的代码(个人觉得那个jquery的手册很不错)
Feb 10 Javascript
JS增加行复制行删除行的实现代码
Nov 09 Javascript
给before和after伪元素设置js效果的方法
Dec 04 Javascript
原生JS实现匀速图片轮播动画
Oct 18 Javascript
AngularJS中的按需加载ocLazyLoad示例
Jan 11 Javascript
jQuery中的一些小技巧
Jan 18 Javascript
dropload.js插件下拉刷新和上拉加载使用详解
Oct 20 Javascript
React组件内事件传参实现tab切换的示例代码
Jul 04 Javascript
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
sphinx增量索引的一个问题
2011/06/14 PHP
详解PHP执行定时任务的实现思路
2015/12/21 PHP
PHP中ltrim与rtrim去除左右空格及特殊字符实例
2016/01/07 PHP
Yii2数据库操作常用方法小结
2017/05/04 PHP
Thinkphp5行为使用方法汇总
2017/12/21 PHP
php如何比较两个浮点数是否相等详解
2019/02/12 PHP
Javascript Memoizer浅析
2014/10/16 Javascript
js打造数组转json函数
2015/01/14 Javascript
JavaScript子窗口调用父窗口变量和函数的方法
2015/10/09 Javascript
理解JS事件循环
2016/01/07 Javascript
解析JavaScript面向对象概念中的Object类型与作用域
2016/05/10 Javascript
BootStrap中关于Select下拉框选择触发事件及扩展
2016/11/22 Javascript
基于jquery二维码生成插件qrcode
2017/01/07 Javascript
浅谈javascript的闭包
2017/01/23 Javascript
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
2017/03/15 Javascript
JavaScript 过滤关键字
2017/03/20 Javascript
如何使用bootstrap框架 bootstrap入门必看!
2017/04/13 Javascript
vue的基本用法与常见指令
2017/08/15 Javascript
vue、react等单页面项目应该这样子部署到服务器
2018/01/03 Javascript
详解各版本React路由的跳转的方法
2018/05/10 Javascript
layer插件select选中默认值的方法
2018/08/14 Javascript
使用layer.msg 时间设置不起作用的解决方法
2019/09/12 Javascript
vue实现点击按钮切换背景颜色的示例代码
2020/06/23 Javascript
[01:59]DOTA2首部纪录片《Free to play》预告片
2014/03/12 DOTA
[01:05:59]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.22
2019/09/05 DOTA
python基础教程之序列详解
2014/08/29 Python
python3+PyQt5+Qt Designer实现扩展对话框
2018/04/20 Python
tensorflow1.0学习之模型的保存与恢复(Saver)
2018/04/23 Python
对Django中内置的User模型实例详解
2019/08/16 Python
详解查看Python解释器路径的两种方式
2020/10/15 Python
土耳其国际性时尚购物网站:Modanisa
2018/01/19 全球购物
英国文胸专家:AmpleBosom.com
2018/02/06 全球购物
请写出 float x 与"零值"比较的 if 语句
2016/01/04 面试题
运动会通讯稿150字
2014/02/15 职场文书
环保专项行动方案
2014/05/12 职场文书
防溺水安全教育主题班会
2015/08/12 职场文书