vue啟動(dòng)后請(qǐng)求后端接口報(bào)ERR_EMPTY_RESPONSE錯(cuò)誤的解決
vue啟動(dòng)請(qǐng)求后端接口報(bào)ERR_EMPTY_RESPONSE錯(cuò)誤
原因分析
首先這錯(cuò)只出現(xiàn)在瀏覽器上,沒有出現(xiàn)在app上,由此肯定應(yīng)該是跨域了。可能是服務(wù)器配置了什么,導(dǎo)致沒直接報(bào)出跨域應(yīng)該報(bào)錯(cuò)的內(nèi)容。
解決方案
我們先不考慮后端做修改,先從前端做些修改。
- 1.直接打包放服務(wù)器,同域名和同端口不會(huì)報(bào)錯(cuò),但每次需要打包好放到服務(wù)器,才能看效果,肯定不利于調(diào)試,我們需要的是本地調(diào)試好,再打包放到服務(wù)器。
- 2.配置本地服務(wù)代理
第一種是直接在vue.config.js文件里面配置最為方便

第二種利用node.js寫一個(gè)本地服務(wù)代理,來轉(zhuǎn)發(fā)瀏覽器的請(qǐng)求。這種方式其實(shí)和第一種原理是一樣的,但這方式可擴(kuò)展性好。
我之前用第一種方式,是一直請(qǐng)求不成功,也不報(bào)什么錯(cuò),一直請(qǐng)求超時(shí),看不到可用的信息,無從查起問題的根源。
索性直接自己寫個(gè)代理服務(wù),因?yàn)榉?wù)和服務(wù)之間是不會(huì)跨域的。這里推薦使用express框架來寫,
先去下載express和express-http-proxy,命令為:
npm install express --save npm install express-http-proxy --save
創(chuàng)建一個(gè)js文件,放根目錄就行
const express = require("express");
const proxy = require("express-http-proxy");
const app = express();
// 瀏覽器與服務(wù)器有同源策略限制,服務(wù)器與服務(wù)器之間沒有同源策略限制
app.all('*', function (req, res, next) {//必須卸載app.get前面才有效
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With,x-access-token");
res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
if (req.method == "OPTIONS") {
res.send(200);
/*讓OPTIONS請(qǐng)求快速返回*/
} else {
next();
}
});
app.use('/', proxy('http://真實(shí)服務(wù)器的地址', {
//過濾器(可選)
filter: function(req, res) {
console.log(`請(qǐng)求的路徑1:${req.url}`);
return true;
},
//請(qǐng)求路徑解析(可選)
proxyReqPathResolver: function(req) {
console.log(`請(qǐng)求的路徑2:${req.url}`); //請(qǐng)求的路徑
return `${req.url}` //轉(zhuǎn)發(fā)請(qǐng)求路徑
},
//返回?cái)?shù)據(jù)處理,如果過程有異步操作應(yīng)返回Promise(可選)
userResDecorator: function(proxyRes, proxyResData, userReq, userRes) {
//同步
console.log('返回的數(shù)據(jù)1: '+proxyRes)
console.log('返回的數(shù)據(jù)2: '+proxyResData)
data = JSON.parse(proxyResData.toString('utf8'));
return JSON.stringify(data);
},
//處理請(qǐng)求(可選)
proxyReqOptDecorator: function (proxyReqOpts, srcReq) {
// you can update headers
// proxyReqOpts.headers['Content-Type'] = 'text/html';
// you can change the method
// proxyReqOpts.method = 'GET';
console.log('proxyReqOpts == '+proxyReqOpts);
return proxyReqOpts;
},
//處理請(qǐng)求body(可選)
proxyReqBodyDecorator: function (bodyContent, srcReq) {
console.log('body == '+bodyContent);
return bodyContent;
},
//處理請(qǐng)求頭(可選)
userResHeaderDecorator(headers, userReq, userRes, proxyReq, proxyRes) {
// recieves an Object of headers, returns an Object of headers.
return headers;
},
//自定義錯(cuò)誤(可選)
proxyErrorHandler: function (err, res, next) {
next(err);
}
}))
let server = app.listen(8083,function(){
const port = server.address().port
console.log('服務(wù)開啟成功端口號(hào)是:'+port)
})vue開發(fā)項(xiàng)目請(qǐng)求時(shí)后端接口常見報(bào)錯(cuò)
第一個(gè):Cannot read property ‘upgrade’ of undefined
Cannot read property ‘upgrade’ of undefined
這是主要是因?yàn)樵趘ue.config.js中使用了跨域代理,但是跨域里面的的target字段為空就會(huì)出現(xiàn)此報(bào)錯(cuò)
解決:
? ?proxy: {
? ? ? ? ? ? //配置跨域
? ? ? ? ? ? '/api': {
? ? ? ? ? ? ? ? target: '139.198.180.240:8199', // 接口的域名 ? 這個(gè)一定要配置
? ? ? ? ? ? ? ? // ws: true, // 是否啟用websockets
? ? ? ? ? ? ? ? changOrigin: true, // 開啟代理,在本地創(chuàng)建一個(gè)虛擬服務(wù)端
? ? ? ? ? ? ? ? pathRewrite: {
? ? ? ? ? ? ? ? ? ? '^/api': '/'
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }第二個(gè):name.toUpperCase is not a function
name.toUpperCase is not a function
在axios請(qǐng)求中,請(qǐng)求頭中設(shè)置token之后,必須保證其是一個(gè)對(duì)象,如果是字符串就會(huì)報(bào)此錯(cuò)誤
解決:
headers: { Authorization: "Bearer " + remember_token }第三個(gè):Network Error
Network Error
Visual Studio Code與Idea前后端分離操作,當(dāng)Idea與Visual Studio Code都啟動(dòng)了,在頁面登陸卻報(bào)了 登陸失敗的消息 nginx沒有啟動(dòng)
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- vue在install時(shí)node-sass@4.14.1?postinstall:node?scripts/build.js錯(cuò)誤解決
- Vue項(xiàng)目本地沒有問題但部署到服務(wù)器上提示錯(cuò)誤(問題解決方案)
- vue2文件流下載成功后文件格式錯(cuò)誤、打不開及內(nèi)容缺失的解決方法
- vue中axios的post請(qǐng)求,415錯(cuò)誤的問題
- vue3+vite assets動(dòng)態(tài)引入圖片的三種方法及解決打包后圖片路徑錯(cuò)誤不顯示的問題
- vue3+ElementPlus使用lang="ts"報(bào)Unexpected?token錯(cuò)誤的解決辦法
- vue監(jiān)聽頁面上的報(bào)錯(cuò)信息
相關(guān)文章
基于Vue3創(chuàng)建一個(gè)簡單的倒計(jì)時(shí)組件
這篇文章主要給大家介紹了基于Vue3創(chuàng)建一個(gè)簡單的倒計(jì)時(shí)組件的代碼示例,文中通過代碼示例介紹的非常詳細(xì),具有一定的參考價(jià)值,需要的朋友可以參考下2023-11-11
vue-router 手勢滑動(dòng)觸發(fā)返回功能
這篇文章主要介紹了vue-router 手勢滑動(dòng)觸發(fā)返回功能,文中通過實(shí)例代碼給大家介紹了vue圖片左右滑動(dòng)及手勢縮放,需要的朋友可以參考下2018-09-09
Vue模擬響應(yīng)式原理底層代碼實(shí)現(xiàn)的示例
最近去面試的人都會(huì)有這個(gè)體會(huì),去年面試官只問我怎么用vue,今年開始問我vue響應(yīng)式原理,本文就詳細(xì)的介紹一下2021-08-08
vue-cropper插件實(shí)現(xiàn)圖片截取上傳組件封裝
這篇文章主要為大家詳細(xì)介紹了vue-cropper插件實(shí)現(xiàn)圖片截取上傳組件封裝,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-05-05
vue項(xiàng)目打包后請(qǐng)求地址錯(cuò)誤/打包后跨域操作
這篇文章主要介紹了vue項(xiàng)目打包后請(qǐng)求地址錯(cuò)誤/打包后跨域操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
Electron+vue從零開始打造一個(gè)本地播放器的方法示例
這篇文章主要介紹了Electron+vue從零開始打造一個(gè)本地播放器的方法示例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10

