vite解决跨域+模拟获取十万条数据

使用express模拟数据十万条

import express from 'express'
// const cors = require('cors')
const app = express()
// app.use(cors())
app.get('/list', (req, res) => {
  let list = []
  let num = 0
  for (let i = 0; i < 100000; i++) {
    num++
    list.push({
      src: 'https://img1.baidu.com/it/u=337195790,3454436041&fm=253&fmt=auto&app=138&f=PNG?w=300&h=500',
      text: `我是${num}号嘉宾`,
      tid: num,
    })
  }
  res.json(list)
})
app.listen(2000, () => {
  console.log('http://127.0.0.1:2000')
})

配置代理

export default defineConfig({
  plugins: [vue()],
  server: {
    //port: 3000,
    open: true,
    proxy: {
    // 请求的路径前缀只要是 /api 就会被拦截走这个代理
    '/api': {
    /**
      *  请求的目标资源再经过替换成 /api/list 后，
      *  会加上 http://127.0.0.1:3000 这个前缀，
      *  最后请求的URL为:http://127.0.0.1:3000/api/list
      */
      target: 'http://127.0.0.1:2000',
      ws: true,
      changeOrigin: true,
      // 拦截到的请求路径 testaxios/httphwm/getList，/testaxios会被替换成空
      rewrite: (path) => path.replace(/^\/api/, ''),
    },
  },
}
})

这里很有意思，第一次请求时200，在不清除缓存的情况下，再次发送请求返回304

查阅涉及协商缓存，强缓存--有待消化

====明日尝试处理下这么多数据