代理

@Proxy

从一个服务域请求另外一个服务器

为开发服务器配置自定义代理规则。期望接收一个 { key: options } 对象。任何请求路径以 key 值开头的请求将被代理到对应的目标

proxy: {
  "key": "options"
}

同域

协议相同 - https 和 http 属于不同域

IP 相同 - localhost 和 127.0.0.1 属于不同域

端口相同

可以由前端或后端解决

解决跨域的冲突；注意调整接口的使用

更多信息，请访问 vite-server

localhost：本地服务器，不经过网卡传输的，它不受网络防火墙和网卡相关的限制

127.0.0.1：本机地址是域名访问，通过网卡传输的，依赖网卡，并受到网络防火墙和网卡相关的限制

前端处理

修改项目 vite.config.js 中的服务器 server 配置，增加对访问接口的代理 - 将所有以 /store 开头的请求，代理到 http://127.0.0.1:3000

server: {
  // open: false,
  // host: '127.0.0.1',
  // port: '5173',
  proxy: {
    '/api': {
      target: 'http://127.0.0.1:3000',
      changeOrigin: true,
      rewrite: (path) => path.replace(/^\/api/, '')
    }
  }
}

开启重写 rewrite，请求时要额外指定请求路径前缀串，但是会被替换为空；主要起到分类的作用

先拼接再替换；替换请求中的同名串

请求为：

/api

拼接为

http://127.0.0.1:3000/api/

替换掉/api后，解析为

http://127.0.0.1:3000/

请求为：

/api/detail

拼接为

http://127.0.0.1:3000/api/detail

替换掉/api后，解析为

http://127.0.0.1:3000/detail

[] 王者荣耀英雄资料数据抓取代理

添加一个代理

'/api': {
  target: 'https://pvp.qq.com',
  changeOrigin: true,
  rewrite: (path) => path.replace(/^\/api/, '')
}

网络请求

axios.get('/api/web201605/js/herolist.json').then(res => {
  console.log(res);
})

后端处理

简单粗暴的设置响应头 Access-Control-Allow-Origin为所有*

router.get('/all', (req, res) => {
  // console.log('hi', req);
  res.header('Access-Control-Allow-Origin', '*')
  res.send(food.cont)
})

或设置指定的地址

res.header('Access-Control-Allow-Origin', 'localhost:3000')

为了避免在每个请求中设置响应头，可以使用中间件，统一处理

app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
  next();
})

使用第三方库 cors

安装

npm install cors

引入

const cors = require('cors')

使用

app.use(cors());