跨域解决方案之代理

我们前面讲到的CORS方案和JSONP方案都是对服务器有要求，像CORS方案是让服务器加入一个响应头 Access-Control-Allow-Origin，像JSONP方案是让服务器响应一段调用函数的JS代码，这两个方案都要求服务器得是自己人。那如果我们操控不了服务器怎么办呢，总不能真的让马云去改淘宝的服务器吧，所以便有了我们这次所讲的代理方案。

代理方案怎么做的

代理方案首先会找到一个中间人---代理服务器（一般来说是自己的服务器），我们知道跨域问题是因为有浏览器的同源策略，那么脱离了浏览器就不存在跨域问题，所以我们不直接向服务器发送请求，而是先发送给代理服务器，通过代理服务器转发到服务器，然后服务器响应给代理服务器，代理服务器再响应给浏览器，那么一来就浏览器和服务器之间就不存在跨域问题了，如果代理服务器和浏览器发生跨域问题，就可以使用CORS方案或者JSONP方案去解决了，毕竟自己的服务器可以随便操控。

此时对浏览器来说，就是请求了自己的服务器，然后自己的服务器给了自己一个响应浏览器是不知道后面发生了啥的，也不需要知道。

我们自己先搭建一个服务器去试试：

然后在页面去发送这个请求：

然后我们在自己的服务器去发送请求，比如这里去请求王者荣耀所有的英雄信息：

const express = require("express");
const app = express();

// 接收一个get请求,地址是 /hero
app.get("/hero", async (req, res) => {
  const axios = require("axios");
  // 获取王者荣耀的英雄信息
  const resp = await axios.get("https://pvp.qq.com/web201605/js/herolist.json");
  // 使用CORS方案解决跨域
  res.header("access-control-allow-origin", "*");
  res.send(resp.data);
});

app.listen(9527, () => {
  console.log("服务器启动!");
});

然后去调用自己的服务器，通过服务器去发送请求获取王者荣耀所有的英雄信息：

如果直接在浏览器去请求王者荣耀所有的英雄信息就肯定会报错跨域问题。

所以代理方案就是通过代理服务器去发送请求来避免产生跨域问题。