vue2 node使用axios 发送get请求返回404错误

Question

想用vue在前端发送get请求，得到后台返回的json数据，但是出现404错误，谁能帮我看一下问题出在哪里么？

//goods.vue
<script type="text/ecmascript-6">
  import './../assets/css/base.css';
  import './../assets/css/product.css';
  import './../assets/css/login.css';
  import './../assets/css/checkout.css';
  import NavHeader from '@/components/NavHeader.vue';
  import NavFooter from '@/components/NavFooter.vue'
  import NavBread from '@/components/NavBread.vue'
  import axios from 'axios'
  export default {
    data(){
      return{
        goodsList:[]
      }
    },
    components:{
      NavHeader,
      NavFooter,
      NavBread
    },
    mounted(){
      this.getGoodsList();
    },
    methods: {
      getGoodsList(){
        axios.get('/goods').then((response)=>{
          var res = response.data;
          this.goodsList = res.result;
        })
      }
    }
  }
</script>

//dev-server.js
const goodsData = require('./../mock/goods.json')
const router = express.Router()
router.get("/goods", function (req,res) {
  res.json(goodsData)
})
app.use(router)

Answer 1

建议你可以先尝试下：

1. 先确定你的server的API是可以用的，用curl或者postman确认
2. 确保前端vue是访问的server一样的url

Answer 2

首先404就是表示资源未找到，看了你上面的描述，我感觉应该是那个api的地址路径不对造成的

Answer 3

app.use use

Answer 4

检查下请求地址能不能访问得到

Answer 5

我跟你出现的问题差不多 最后就是路径的问题 你先检查一下路径写的对不对 该引得资源引了没

Answer 6

你需要安装express：cnpm install express --save-dev
然后在webpack-dev-conf.js文件中，代码应该这样改写：

const express=require('express')
var app=express()
var router=express.Router()
var goodsData=require('./../mock/goods.json')
app.use('/goods/',router)
...
devServer: {
...
    before(app){
      app.get('/goods',(req,res)=>{
        res.json({
          data:goodsData
        })
      })
    }
}

我估计和你看的是同一个视频教程，视频漏过去并且版本不对，害我排了一下午+一晚上的错。