代理

@Proxy

从一个服务域请求另外一个服务器域的资源

同域

协议相同

IP 相同

端口相同

跨域

协议、IP和端口任一不相同，都为跨域

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

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

端口不同 - 3000 和 5173

解决方案

可以由前端或后端解决

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

更多信息，请访问 vite-server

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

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

静态文件托管服务（如 GitHub Pages）。这类服务通常已经正确配置 CORS，允许来自任何域的请求。因此，在大多数情况下，你不需要额外处理跨域问题

前端处理

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

proxy: {
  "key": "options"
}

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

rewrite：将请求路径中的 /api 前缀去掉，然后再转发到目标服务器。

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/, '')
    }
  }
}

请求为：

/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

[] 腾讯地图服务 WebService API 使用

直接请求，提示跨域

axios.get('https://apis.map.qq.com/ws/location/v1/ip?ip=&key=your_key')

代理

"/map-api": {
  target: "https://apis.map.qq.com",
  changeOrigin: true,
  rewrite: (path) => path.replace(/^\/map-api/, ""),
}

axios.get('/map-api/ws/location/v1/ip?ip=&key=your_key')

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

添加一个代理

'/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());