vue启动后请求后端接口报ERR_EMPTY_RESPONSE错误的解决

 更新时间:2023年05月18日 10:52:02   作者:我是大咸鱼  
这篇文章主要介绍了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没有启动

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue3中的动画过渡实现技巧分享

    Vue3中的动画过渡实现技巧分享

    在现代的前端开发中,用户体验的重要性不言而喻,为了让应用程序更加生动和引人注目,动画和过渡效果是必不可少的元素,本文将以 Vue3 为基础,深入探讨如何在应用程序中实现动画过渡,以及一些技巧和最佳实践,需要的朋友可以参考下
    2025-01-01
  • vue读取本地的excel文件并显示在网页上方法示例

    vue读取本地的excel文件并显示在网页上方法示例

    这篇文章主要介绍了vue读取本地的excel文件并显示在网页上方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • 解决vue2.0动态绑定图片src属性值初始化时报错的问题

    解决vue2.0动态绑定图片src属性值初始化时报错的问题

    下面小编就为大家分享一篇解决vue2.0动态绑定图片src属性值初始化时报错的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • 详解Vue2.5+迁移至Typescript指南

    详解Vue2.5+迁移至Typescript指南

    这篇文章主要介绍了详解Vue2.5+迁移至Typescript指南,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • vue+elementUI实现多文件上传与预览功能实战记录(word/PDF/图片/docx/doc/xlxs/txt)

    vue+elementUI实现多文件上传与预览功能实战记录(word/PDF/图片/docx/doc/xlxs/txt)

    这篇文章主要给大家介绍了关于利用vue+elementUI实现多文件上传与预览功能的相关资料,包括word/PDF/图片/docx/doc/xlxs/txt等格式文件上传,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-08-08
  • Vue如何清空对象

    Vue如何清空对象

    这篇文章主要介绍了Vue如何清空对象,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03
  • vue实现自定义"模态弹窗"组件实例代码

    vue实现自定义"模态弹窗"组件实例代码

    页面中会有很多时候需要弹窗提示,我们可以写一个弹窗组件,下面这篇文章主要给大家介绍了关于vue实现自定义"模态弹窗"组件的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2021-12-12
  • 基于vue-element组件实现音乐播放器功能

    基于vue-element组件实现音乐播放器功能

    这篇文章主要介绍了基于vue-element组件实现音乐播放器功能,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
    2018-05-05
  • 教你利用Vue3模仿Windows窗口

    教你利用Vue3模仿Windows窗口

    最近学习了Vue3,利用vue3做了个好玩的项目,所以下面这篇文章主要给大家介绍了关于如何利用Vue3模仿Windows窗口的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-04-04
  • vue3一个元素如何绑定两个或多个事件

    vue3一个元素如何绑定两个或多个事件

    这篇文章主要介绍了vue3一个元素如何绑定两个或多个事件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11

最新评论