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)
})

猜你喜欢

转载自blog.csdn.net/qq_29194615/article/details/124547844