vue+express+mysql搭建博客时,使用axios进行前后台数据交互时,出现GET http://localhost:8080/api/getArticle 504 (Gateway Timeout) 或者GET http://localhost:8080/api/getArticle 404 (Not Found),找了很久才解决,所以写个博客记录一下用到的方法或者相关方法
1.跨域:这个是一开始遇到的,解决有很多教程
(1)在项目中的config => index.js中的ProxyTable设置

//   config/index.js中

proxyTable: {
      '/api': {
        target: 'http://localhost:3000',   
        changeOrigin: true,  //允许跨域
        pathRewrite: {
          '^/api': ''
        }
      }
// server/index.js中

const express = require('express');
const app = express();

app.get('/api/getArticle', (req, res, next) => {
  res.json({
    data: '后台返回结果 getArticle'
  })
})

// 监听端口
app.listen(3000);    //后台运行在3000端口
console.log('success listen at port:3000......');
//  component/note.vue中

methods: {
      getArticle (){
        this.axios.get('/api/getArticle')
          .then( (res) => {
            console.log('res', res);
            this.message = res.data.data;
          })
      }
    }

按照如上设置,就可以解决跨域问题

2.如何跨域实现后,还是出现一开始的问题,那么有可能是你的后台端口没有打开,在cmd中,进入server目录,运行server/index.js文件


    cd blog  //进入项目文件
    cd server   //使用node文件
    cd index.js   //使用node搭建的服务器
    node index.js    //运行文件,打开后台端口
   
端口打开后,再重新刷新页面就可以了。
Logo

前往低代码交流专区

更多推荐