關于vue-resource報錯450的解決方案
本文介紹了關于vue-resource報錯450的解決方案，分享給大家，具體如下：
一、基本使用：
1.頁面引入
import vueResource from 'vue-resource' Vue.use(vueResource)
2. 調(diào)取接口
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，檢查頁面代碼，發(fā)現(xiàn)已經(jīng)設置了
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()
})
只是頁面沒有起作用而已，那究竟是什么原因?qū)е马撁嬖O置的Content-Type失效了呢？繼續(xù)追溯，發(fā)現(xiàn)跟這行代碼有關
// 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請求的情況下，可以通過另一種完全違背協(xié)議的HTTP方法來"代理"。這種協(xié)議就是，使客戶端發(fā)出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
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
- 詳解vue-Resource（與后端數(shù)據(jù)交互）
- 談談Vue.js——vue-resource全攻略
- Vue2學習筆記之請求數(shù)據(jù)交互vue-resource
- Vue-resource實現(xiàn)ajax請求和跨域請求示例
- 詳解vue與后端數(shù)據(jù)交互(ajax)：vue-resource
- vue-resource 攔截器使用詳解
- 詳解vue 配合vue-resource調(diào)用接口獲取數(shù)據(jù)
- Vue.js使用$.ajax和vue-resource實現(xiàn)OAuth的注冊、登錄、注銷和API調(diào)用
- 詳解vue-resource promise兼容性問題
- 詳解vue前后臺數(shù)據(jù)交互vue-resource文檔
相關文章
Vue+ElementUi實現(xiàn)點擊表格中鏈接進行頁面跳轉(zhuǎn)與路由詳解
在vue中進行前端網(wǎng)頁開發(fā)時,通常列表數(shù)據(jù)用el-table展示,下面這篇文章主要給大家介紹了關于Vue+ElementUi實現(xiàn)點擊表格中鏈接進行頁面跳轉(zhuǎn)與路由的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-02-02
這篇文章主要介紹了15分鐘學會vue項目改造成SSR(小白教程)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-12-12
這篇文章主要介紹了vue組件props傳值,對象獲取不到的問題,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-06-06
Vue.js已成為現(xiàn)代Web開發(fā)中不可或缺的技術(shù)之一,雖然Vue.js的一些基礎概念和語法比較易學,但深入挖掘Vue.js的核心概念和功能需要更多的實踐,下面這篇文章主要給大家介紹了關于Vue3封裝組件(帶回調(diào)事件)的相關資料,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了Vue中使用mixins混入方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要介紹了Vue SPA單頁應用首屏優(yōu)化實踐，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
這篇文章主要為大家詳細介紹了vue實現(xiàn)登錄滑動拼圖驗證，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
在Vue項目中,你可以使用路由（vue-router）來實現(xiàn)頁面跳轉(zhuǎn)并傳遞參數(shù),這篇文章主要為大家整理了一些常用的方法,感興趣的小伙伴可以學習一下2023-11-11
vue自定義指令和動態(tài)路由實現(xiàn)權(quán)限控制
這篇文章主要介紹了vue自定義指令和動態(tài)路由實現(xiàn)權(quán)限控制的方法，幫助大家更好的理解和學習vue，感興趣的朋友可以了解下2020-08-08
這篇文章主要為大家詳細介紹了Vue實現(xiàn)點擊導航欄當前標簽后變色功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08