vue启动后请求后端接口报ERR_EMPTY_RESPONSE错误的解决
作者：我是大咸鱼
vue启动请求后端接口报ERR_EMPTY_RESPONSE错误
原因分析
首先这错只出现在浏览器上，没有出现在app上，由此肯定应该是跨域了。可能是服务器配置了什么，导致没直接报出跨域应该报错的内容。
解决方案
我们先不考虑后端做修改，先从前端做些修改。
- 1.直接打包放服务器，同域名和同端口不会报错，但每次需要打包好放到服务器，才能看效果，肯定不利于调试，我们需要的是本地调试好，再打包放到服务器。
- 2.配置本地服务代理
第一种是直接在vue.config.js文件里面配置最为方便
第二种利用node.js写一个本地服务代理，来转发浏览器的请求。这种方式其实和第一种原理是一样的，但这方式可扩展性好。
我之前用第一种方式，是一直请求不成功，也不报什么错，一直请求超时，看不到可用的信息，无从查起问题的根源。
索性直接自己写个代理服务，因为服务和服务之间是不会跨域的。这里推荐使用express框架来写，
先去下载express和express-http-proxy，命令为：
npm install express --save npm install express-http-proxy --save
创建一个js文件，放根目录就行
const express = require("express");
const proxy = require("express-http-proxy");
const app = express();
// 浏览器与服务器有同源策略限制，服务器与服务器之间没有同源策略限制
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://真实服务器的地址', {
//过滤器（可选）
filter: function(req, res) {
console.log(`请求的路径1：${req.url}`);
return true;
},
//请求路径解析（可选）
proxyReqPathResolver: function(req) {
console.log(`请求的路径2：${req.url}`); //请求的路径
return `${req.url}` //转发请求路径
},
//返回数据处理,如果过程有异步操作应返回Promise（可选）
userResDecorator: function(proxyRes, proxyResData, userReq, userRes) {
//同步
console.log('返回的数据1: '+proxyRes)
console.log('返回的数据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('服务开启成功端口号是：'+port)
})vue开发项目请求时后端接口常见报错
第一个：Cannot read property ‘upgrade’ of undefined
Cannot read property ‘upgrade’ of undefined
这是主要是因为在vue.config.js中使用了跨域代理，但是跨域里面的的target字段为空就会出现此报错
解决：
proxy: {
//配置跨域
'/api': {
target: '139.198.180.240:8199', // 接口的域名 这个一定要配置
// ws: true, // 是否启用websockets
changOrigin: true, // 开启代理，在本地创建一个虚拟服务端
pathRewrite: {
'^/api': '/'
}
}
}第二个：name.toUpperCase is not a function
name.toUpperCase is not a function
在axios请求中，请求头中设置token之后，必须保证其是一个对象，如果是字符串就会报此错误
解决：
headers: { Authorization: "Bearer " + remember_token }第三个：Network Error
Network Error
Visual Studio Code与Idea前后端分离操作，当Idea与Visual Studio Code都启动了，在页面登陆却报了 登陆失败的消息 nginx没有启动
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。