跨域之服务器代理

跨域问题是当一个网页向另一个网页发送请求，而两个网页的域名不同，就会产生跨域问题。在此情况下，我们可以采用代理的方式来解决跨域问题。

代理就是将某个请求发送给代理服务器，在代理服务器上进行请求发送和响应接收，然后再将响应返回给发起请求的客户端。这样就能够避免浏览器中跨域请求的限制。

实现代理可以采用以下两种方式：

1. 后端代理

后端代理是指在同一台服务器上的另一个应用程序中进行跨域请求。当我们向后端应用发送请求时，会通过后端应用来发送请求，后端应用再将响应返回给前端应用。这样，由于请求都是在同一台服务器上进行，就不存在跨域问题了。

1. 前端代理

前端代理是指将跨域请求发送到同一个域名的不同端口或子路径。在这种情况下，我们可以在前端使用一些框架或库（如Webpack、devServer等）来实现代理。具体方法是在前端设置一个本地代理服务器，将跨域请求发送到该代理服务器上，然后代理服务器再将请求发送到目标服务器，接收响应并返回给前端应用。

以上两种代理方式都能够有效解决跨域问题，选择哪种方式主要取决于实际情况和具体需求。

前端跨域代理是一种常用的解决跨域问题的方法，其具体实现步骤如下：

1. 在前端代码中使用相对路径或协议相同的绝对路径请求代理服务器上的接口（例如请求 http://localhost:8080/api/xxx 的接口可以改为请求 /api/xxx 的接口）。

2. 在代理服务器上搭建一个本地服务器，监听与前端代码请求相同的路径，例如监听 /api/xxx 的请求。

3. 当代理服务器收到前端代码的请求时，将请求转发到目标服务器上，例如将 /api/xxx 的请求转发到 http://api.example.com/xxx。

4. 将目标服务器返回的响应再转发回前端代码。

5. 对于跨域请求，需要在代理服务器上设置正确的 CORS 头信息，或者使用 JSONP 等跨域技术进行跨域请求。

需要注意的是，前端跨域代理在实际应用中需要考虑安全性、性能等方面的问题，例如控制代理服务器的 IP 白名单、设置缓存等。

以下是一个基于 Node.js 的跨域代理的示例代码：

const http = require('http');
const httpProxy = require('http-proxy');

// 创建一个 http proxy 服务器实例
const proxy = httpProxy.createServer({
  target: 'http://api.example.com', // 目标服务器的地址
  changeOrigin: true, // 设置为 true，会自动将请求头中的 Host 字段改为目标服务器的域名或 IP
});

// 创建一个 http 服务器实例
const server = http.createServer((req, res) => {
  res.setHeader('Access-Control-Allow-Origin', '*'); // 允许跨域访问
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type'); // 允许跨域请求携带特定的头信息

  if (req.url.startsWith('/api')) {
    proxy.web(req, res); // 当请求的路径以 /api 开头时，交给代理服务器处理
  } else {
    res.end('Hello World'); // 当请求的路径不以 /api 开头时，直接响应字符串
  }
});

server.listen(8080, () => {
  console.log('http://localhost:8080');
});

这段代码创建了一个 http 服务器实例，监听端口 8080，并设置了允许跨域访问的头信息。当前端代码请求 /api 开头的路径时，交给代理服务器实例处理。代理服务器实例会将请求转发到目标服务器，并将目标服务器的响应再转发回前端代码。