关于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让IE浏览器event对象符合W3C DOM标准
Nov 24 Javascript
js 编程笔记 无名函数
Jun 28 Javascript
Js中获取frames中的元素示例代码
Jul 30 Javascript
jquery实现弹出窗口效果的实例代码
Nov 28 Javascript
jQuery的图片滑块焦点图插件整理推荐
Dec 07 Javascript
jQuery中 delegate使用的问题
Jul 03 Javascript
【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)
Jun 07 Javascript
node文件批量重命名的方法示例
Oct 23 Javascript
微信小程序实现图片预览功能
Jan 31 Javascript
layui radio性别单选框赋值方法
Aug 15 Javascript
vue项目接口管理,所有接口都在apis文件夹中统一管理操作
Aug 13 Javascript
详解uniapp的全局变量实现方式
Jan 11 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
PHP 获取MySQL数据库里所有表的实现代码
2011/07/13 PHP
PHP Smarty模版简单使用方法
2016/03/30 PHP
PHP实现将MySQL重复ID二维数组重组为三维数组的方法
2016/08/01 PHP
PHP身份证校验码计算方法
2016/08/10 PHP
基于php实现的php代码加密解密类完整实例
2016/10/12 PHP
PHP回调函数与匿名函数实例详解
2017/08/16 PHP
Laravel框架源码解析之入口文件原理分析
2020/05/14 PHP
JavaScript中的View-Model使用介绍
2011/08/11 Javascript
JS获得QQ号码的昵称,头像,生日的简单实例
2013/12/04 Javascript
通过复制Table生成word和excel的javascript代码
2014/01/20 Javascript
让input框实现类似百度的搜索提示(基于jquery事件监听)
2014/01/31 Javascript
Jquery弹出层插件ThickBox的使用方法
2014/12/09 Javascript
Javascript基础教程之数据类型 (字符串 String)
2015/01/18 Javascript
jQuery的load()方法及其回调函数用法实例
2015/03/25 Javascript
简单的JS轮播图代码
2016/07/18 Javascript
JS Canvas定时器模拟动态加载动画
2016/09/17 Javascript
Bootstrap实现提示框和弹出框效果
2017/01/11 Javascript
javascript基础知识之html5轮播图实例讲解(44)
2017/02/17 Javascript
Bootstrap实现各种进度条样式详解
2017/04/13 Javascript
Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)
2018/05/04 Javascript
vue单页缓存方案分析及实现
2018/09/25 Javascript
解决layer弹出层msg的文字不显示的问题
2019/09/11 Javascript
js实现圆形显示鼠标单击位置
2020/02/11 Javascript
JS实现网页端猜数字小游戏
2020/03/06 Javascript
JavaScript 实现下雪特效的示例代码
2020/09/09 Javascript
[50:34]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python中urllib+urllib2+cookielib模块编写爬虫实战
2016/01/20 Python
Django框架搭建的简易图书信息网站案例
2019/05/25 Python
html5拍照功能实现代码(htm5上传文件)
2013/12/11 HTML / CSS
万得城电器土耳其网站:欧洲第一大电子产品零售商
2016/10/07 全球购物
高性能钓鱼服装:Huk Gear
2019/02/20 全球购物
财务部总监岗位职责
2014/03/12 职场文书
农民工工资支付承诺函
2014/03/31 职场文书
副科竞争上岗演讲稿
2014/05/12 职场文书
关于艺术节的开幕致辞
2016/03/04 职场文书
Python快速优雅的批量修改Word文档样式
2021/05/20 Python