Antd Mobile 跨域解决方案：使用 Axios 和代理配置

"Antd Mobile 跨域解决方案：使用 Axios 和代理配置"\n\n本文介绍如何使用 Axios 和代理配置解决 Antd Mobile 跨域问题，通过代理服务器将请求转发到目标服务器，从而绕过浏览器的跨域限制。\n\n要解决 Antd Mobile 使用 Axios 跨域的问题，可以通过以下步骤进行处理：\n\n1. 安装 Axios 和 http-proxy-middleware：在项目根目录下运行以下命令来安装这两个依赖：\n\nbash\nnpm install axios http-proxy-middleware\n\n\n2. 创建一个代理配置文件：在 src 目录下创建一个名为 setupProxy.js 的文件，并在其中添加以下代码：\n\njavascript\nconst proxy = require('http-proxy-middleware');\n\nmodule.exports = function(app) {\n app.use(\n '/api',\n proxy({\n target: 'http://example.com', // 修改为你的 API 服务器地址\n changeOrigin: true,\n })\n );\n};\n\n\n这个配置文件将所有以 /api 开头的请求代理到目标服务器，你需要将 target 修改为你的 API 服务器地址。\n\n3. 配置 Antd Mobile 使用 Axios：在你的代码中导入 Axios 并使用它发送请求，例如：\n\njavascript\nimport axios from 'axios';\n\naxios.get('/api/data')\n .then(response => {\n console.log(response.data);\n })\n .catch(error => {\n console.error(error);\n });\n\n\n这样，当你发送以 /api 开头的请求时，Axios 会自动将其代理到目标服务器。\n\n4. 启动开发服务器：运行 npm start 来启动开发服务器，它会自动使用 setupProxy.js 配置文件中的代理设置。\n\n现在，当你发送以 /api 开头的请求时，Axios 会将其代理到目标服务器，解决 Antd Mobile 使用 Axios 跨域的问题。