代理本地开发跨域：告别跨域困扰，畅快开发！

2023-11-30 10:12:55

在Web开发中，跨域请求是一个令人头疼的问题，它阻碍了不同域名之间的资源共享。为了解决这一难题，代理服务器闪亮登场，为我们提供了跨域的解决方案。本文将深入探讨代理服务器在本地开发中的应用，手把手教你配置代理，告别跨域困扰，畅快开发！

理解代理服务器

代理服务器充当中间人，在客户端和目标服务器之间架起了一座桥梁。它接收客户端请求，转发到目标服务器，并将服务器响应返回给客户端。通过代理服务器，客户端和服务器可以绕过同源策略的限制，进行跨域通信。

配置本地代理服务器

1. 安装 Node.js 和 Axios

代理服务器的配置需要用到 Node.js 和 Axios 库。使用以下命令进行安装：

npm install nodemon axios

2. 创建 proxy.js 文件

在项目目录中创建一个名为 proxy.js 的文件，并输入以下代码：

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

const port = 3000;
const targetUrl = "https://example.com";

app.use((req, res) => {
  axios({
    method: req.method,
    url: targetUrl + req.url,
    data: req.body,
    headers: req.headers,
  })
    .then((response) => {
      res.send(response.data);
    })
    .catch((error) => {
      console.error(error);
      res.status(500).send("Error occurred while proxying request.");
    });
});

app.listen(port, () => {
  console.log(`Proxy server is listening on port ${port}`);
});

请注意，将 targetUrl 替换为要代理的目标服务器的 URL，并根据需要修改 port。

3. 启动代理服务器

在终端中运行以下命令来启动代理服务器：

nodemon proxy.js

使用代理

在客户端代码中，将请求 URL 更改为代理服务器的 URL（例如，http://localhost:3000/api/data），并使用 Axios 或 Fetch 等库进行请求。

// 使用 Axios
axios.get("http://localhost:3000/api/data").then((response) => {
  console.log(response.data);
});

// 使用 Fetch
fetch("http://localhost:3000/api/data").then((response) => {
  console.log(response.json());
});