跨域demo

后端用nodejs写了一个小服务器

const express = require('express')
const app = express()
const port = 3000

const msg = [
  {
    name: '张三',
    age: 15,
    sex: '男'
  },
  {
    name: '李四',
    age: 16,
    sex: '男'
  },
  {
    name: '王五',
    age: 18,
    sex: '男'
  },
  {
    name: '田七',
    age: 19,
    sex: '男'
  }
]

app.get('/studentMsg', (req, res) => {
  console.log(req)
  res.json(JSON.stringify(msg))
})

app.listen(port, () => {
  console.log('监听3000端口')
})

写死msg作为传递数据。

vue安装axios插件后使用

import axios from 'axios'

export default function get(url, params) {
  return axios
    .get(url, {
      params
    })
    .then((res) => {
      return res.data
    })
    .catch((e) => {
      console.log(e)
    })
}

vue组件

<template>
  <button @click="getSth">获取数据</button>
  <div>
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="name" label="姓名" width="180" />
      <el-table-column prop="age" label="年龄" width="180" />
      <el-table-column prop="sex" label="性别" />
    </el-table>
  </div>
</template>

<script>
import getMsg from '@/server/getMsg'
export default {
  name: 'my_demo',
  data() {
    return {
      tableData: {}
    }
  },
  methods: {
    async getSth() {
      const data = await getMsg('api/studentMsg')
      this.tableData = JSON.parse(data)
    }
  }
}
</script>

<style></style>

解决跨域问题是通过webpack的devServer代理 具体设置如下

devServer: {
    host: 'localhost', // target host
    port: 8080,
    // proxy:{'/api':{}},代理器中设置/api,项目中请求路径为/api的替换为target
    proxy: {
      '/api': {
        target: 'http://localhost:3000', // 代理地址，这里设置的地址会代替axios中设置的baseURL
        changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
        // ws: true, // proxy websockets
        // pathRewrite方法重写url
        pathRewrite: {
          '^/api': '/'
        }
      }
    }
  }

这里有一个小BUG，点击获取数据按钮后，会再次刷新一个按钮。