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中的動(dòng)畫過渡實(shí)現(xiàn)技巧分享
在現(xiàn)代的前端開發(fā)中,用戶體驗(yàn)的重要性不言而喻,為了讓應(yīng)用程序更加生動(dòng)和引人注目,動(dòng)畫和過渡效果是必不可少的元素,本文將以 Vue3 為基礎(chǔ),深入探討如何在應(yīng)用程序中實(shí)現(xiàn)動(dòng)畫過渡,以及一些技巧和最佳實(shí)踐,需要的朋友可以參考下2025-01-01vue讀取本地的excel文件并顯示在網(wǎng)頁上方法示例
這篇文章主要介紹了vue讀取本地的excel文件并顯示在網(wǎng)頁上方法示例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05解決vue2.0動(dòng)態(tài)綁定圖片src屬性值初始化時(shí)報(bào)錯(cuò)的問題
下面小編就為大家分享一篇解決vue2.0動(dòng)態(tài)綁定圖片src屬性值初始化時(shí)報(bào)錯(cuò)的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03vue+elementUI實(shí)現(xiàn)多文件上傳與預(yù)覽功能實(shí)戰(zhàn)記錄(word/PDF/圖片/docx/doc/xlxs/txt)
這篇文章主要給大家介紹了關(guān)于利用vue+elementUI實(shí)現(xiàn)多文件上傳與預(yù)覽功能的相關(guān)資料,包括word/PDF/圖片/docx/doc/xlxs/txt等格式文件上傳,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08vue實(shí)現(xiàn)自定義"模態(tài)彈窗"組件實(shí)例代碼
頁面中會(huì)有很多時(shí)候需要彈窗提示,我們可以寫一個(gè)彈窗組件,下面這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)自定義"模態(tài)彈窗"組件的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-12-12基于vue-element組件實(shí)現(xiàn)音樂播放器功能
這篇文章主要介紹了基于vue-element組件實(shí)現(xiàn)音樂播放器功能,代碼簡單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2018-05-05vue3一個(gè)元素如何綁定兩個(gè)或多個(gè)事件
這篇文章主要介紹了vue3一個(gè)元素如何綁定兩個(gè)或多個(gè)事件問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11