express框架使用axios进行post请求跨域问题，以及返回的数据是undefined的问题

最新推荐文章于 2025-05-14 17:02:14 发布

蜉蝣&一粟

最新推荐文章于 2025-05-14 17:02:14 发布

阅读量3.8k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端爬坑之路 express框架 node.js vue

本文链接：https://blog.youkuaiyun.com/RJN0814/article/details/89488284

前端爬坑之路同时被 3 个专栏收录

50 篇文章

订阅专栏

vue

24 篇文章

订阅专栏

express框架

10 篇文章

订阅专栏

在Express框架下使用axios进行POST请求时遇到跨域问题和前端接收到的数据是undefined。解决方法包括在Express应用中配置请求头以允许跨域，并在Vue项目中使用qs库重新初始化axios。在Node.js接口中，通过JSON.parse和JSON.stringify转换数据，确保前端能够正确接收和解析数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在express框架中使用axios的post方法出现报错，报跨域问题，前端拿到的json数据是undefined

先想要解决这个问题需要自己定义请求头，并且在vue中使用qs重新实例化一个axios，这个项目使用vue做前端框架，使用express写后台接口。

首先在express的app.js文件里设置携带请求头信息

var app = express();
app.use("*",function(req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');
  res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With");
  res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
  if (req.method === 'OPTIONS') {
    res.send(200)
  } else {
    next()
  }
})

在vue里面npm i --save qs，重新实例化一个axios

 let instance = this.axios.create({
                headers: {'content-type': 'application/x-www-form-urlencoded'}
            });

在这里插入图片描述
如此就能解决使用post请求报跨域的问题，接下来讲用node.js写接口在express框架运行能拿到数据，但是前端拿到的数据是undefined的问题。
其实只要在后台将数据处理一下返回前段即可，主要在后端使用JSON的parse和stringify进行转换（这里说的只是用express框架，使用node.js写后台接口的情况）
1.将JSON对象转换为字符串
2.将JSON字符串转换为对象
在这里插入图片描述
此时在前端拿到的数据就是可以进行正常渲染