vue啟動后請求后端接口報ERR_EMPTY_RESPONSE錯誤的解決
vue啟動請求后端接口報ERR_EMPTY_RESPONSE錯誤
原因分析
首先這錯只出現(xiàn)在瀏覽器上,沒有出現(xiàn)在app上,由此肯定應(yīng)該是跨域了??赡苁欠?wù)器配置了什么,導(dǎo)致沒直接報出跨域應(yīng)該報錯的內(nèi)容。
解決方案
我們先不考慮后端做修改,先從前端做些修改。
- 1.直接打包放服務(wù)器,同域名和同端口不會報錯,但每次需要打包好放到服務(wù)器,才能看效果,肯定不利于調(diào)試,我們需要的是本地調(diào)試好,再打包放到服務(wù)器。
- 2.配置本地服務(wù)代理
第一種是直接在vue.config.js文件里面配置最為方便
第二種利用node.js寫一個本地服務(wù)代理,來轉(zhuǎn)發(fā)瀏覽器的請求。這種方式其實和第一種原理是一樣的,但這方式可擴展性好。
我之前用第一種方式,是一直請求不成功,也不報什么錯,一直請求超時,看不到可用的信息,無從查起問題的根源。
索性直接自己寫個代理服務(wù),因為服務(wù)和服務(wù)之間是不會跨域的。這里推薦使用express框架來寫,
先去下載express和express-http-proxy,命令為:
npm install express --save npm install express-http-proxy --save
創(chuàng)建一個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請求快速返回*/ } else { next(); } }); app.use('/', proxy('http://真實服務(wù)器的地址', { //過濾器(可選) filter: function(req, res) { console.log(`請求的路徑1:${req.url}`); return true; }, //請求路徑解析(可選) proxyReqPathResolver: function(req) { console.log(`請求的路徑2:${req.url}`); //請求的路徑 return `${req.url}` //轉(zhuǎn)發(fā)請求路徑 }, //返回數(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); }, //處理請求(可選) 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; }, //處理請求body(可選) proxyReqBodyDecorator: function (bodyContent, srcReq) { console.log('body == '+bodyContent); return bodyContent; }, //處理請求頭(可選) userResHeaderDecorator(headers, userReq, userRes, proxyReq, proxyRes) { // recieves an Object of headers, returns an Object of headers. return headers; }, //自定義錯誤(可選) proxyErrorHandler: function (err, res, next) { next(err); } })) let server = app.listen(8083,function(){ const port = server.address().port console.log('服務(wù)開啟成功端口號是:'+port) })
vue開發(fā)項目請求時后端接口常見報錯
第一個:Cannot read property ‘upgrade’ of undefined
Cannot read property ‘upgrade’ of undefined
這是主要是因為在vue.config.js中使用了跨域代理,但是跨域里面的的target字段為空就會出現(xiàn)此報錯
解決:
? ?proxy: { ? ? ? ? ? ? //配置跨域 ? ? ? ? ? ? '/api': { ? ? ? ? ? ? ? ? target: '139.198.180.240:8199', // 接口的域名 ? 這個一定要配置 ? ? ? ? ? ? ? ? // ws: true, // 是否啟用websockets ? ? ? ? ? ? ? ? changOrigin: true, // 開啟代理,在本地創(chuàng)建一個虛擬服務(wù)端 ? ? ? ? ? ? ? ? pathRewrite: { ? ? ? ? ? ? ? ? ? ? '^/api': '/' ? ? ? ? ? ? ? ? } ? ? ? ? ? ? } ? ? ? ? }
第二個:name.toUpperCase is not a function
name.toUpperCase is not a function
在axios請求中,請求頭中設(shè)置token之后,必須保證其是一個對象,如果是字符串就會報此錯誤
解決:
headers: { Authorization: "Bearer " + remember_token }
第三個:Network Error
Network Error
Visual Studio Code與Idea前后端分離操作,當(dāng)Idea與Visual Studio Code都啟動了,在頁面登陸卻報了 登陸失敗的消息 nginx沒有啟動
總結(jié)
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue讀取本地的excel文件并顯示在網(wǎng)頁上方法示例
這篇文章主要介紹了vue讀取本地的excel文件并顯示在網(wǎng)頁上方法示例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05解決vue2.0動態(tài)綁定圖片src屬性值初始化時報錯的問題
下面小編就為大家分享一篇解決vue2.0動態(tài)綁定圖片src屬性值初始化時報錯的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03vue+elementUI實現(xiàn)多文件上傳與預(yù)覽功能實戰(zhàn)記錄(word/PDF/圖片/docx/doc/xlxs/txt)
這篇文章主要給大家介紹了關(guān)于利用vue+elementUI實現(xiàn)多文件上傳與預(yù)覽功能的相關(guān)資料,包括word/PDF/圖片/docx/doc/xlxs/txt等格式文件上傳,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08vue實現(xiàn)自定義"模態(tài)彈窗"組件實例代碼
頁面中會有很多時候需要彈窗提示,我們可以寫一個彈窗組件,下面這篇文章主要給大家介紹了關(guān)于vue實現(xiàn)自定義"模態(tài)彈窗"組件的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-12-12基于vue-element組件實現(xiàn)音樂播放器功能
這篇文章主要介紹了基于vue-element組件實現(xiàn)音樂播放器功能,代碼簡單易懂,非常不錯,具有一定的參考借鑒價值,需要的朋友參考下吧2018-05-05