秘密通道:配置CRACO以启用反向代理跨域。

流动的水没有形状,漂流的风找不到踪迹,任何案件的推理都取决于心.

尽管现在并不推荐使用 CRA 脚手架,但,水贴的心常在

因为不建议使用 eject 弹出 CRA 的 webpack 配置(该操作不可逆),所以选择使用 Craco 来拓展 CRA 的 webpack 配置。(当然,使用react-app-rewired也是可以的。)

解决方案

Craco 配置解决跨域(推荐)

版本关系

react-scripts version CRACO version
5.x.x (latest) 7.0.0
4.x.x 6.4.5
< 4.0.0 5.8.0

安装依赖

bash 复制代码
yarn add @craco/craco // npm i -D @craco/craco 

修改 package.json

json 复制代码
"scripts": {
-  "start": "react-scripts start"
+  "start": "craco start"
-  "build": "react-scripts build"
+  "build": "craco build"
-  "test": "react-scripts test"
+  "test": "craco test"
}

新建文件

以下类型都支持

  1. craco.config.ts
  2. craco.config.js
  3. craco.config.cjs
  4. .cracorc.ts
  5. .cracorc.js
  6. .cracorc
  • target: 表示的是代理到的目标地址
  • pathRewrite:默认情况下,我们的/api-hy也会被写到 URL 中,如果希望删除,可以使用 pathRewrite
  • changeOrigin: 它是表示是否更新代理后请求的 headers 中的 host 地址
JavaScript 复制代码
// 配置
devServer: {
  proxy: {
    "/api": {
      target: "API_SERVER_ADDRES", // 例如 http://192.168.0.42:9090
        changeOrigin: true,
        pathRewrite: {
        "^/api": "",
          },
    },
  },
},
JavaScript 复制代码
// craco.config.cjs 完整配置
module.exports = {
	webpack: {
		// ...
	},
	devServer: {
		proxy: {
			"/api": {
				target: "http://api.data.ielee.com/",
				// target: "http://192.168.0.42:9090",
				changeOrigin: true,
				pathRewrite: {
					"^/api": "",
				},
			},
		},
	},
};

http-proxy-middleware 中间件

javascript 复制代码
const { createProxyMiddleware } = require('http-proxy-middleware');

const apiProxy = createProxyMiddleware({
  target: 'http://www.example.org',
  changeOrigin: true,
});

// 'apiProxy' is now ready to be used as middleware in a server.

package.json(不推荐)

proxy 端口值后面不带/,在请求时需要在根路径携带/

json 复制代码
{
  "name": "your-app",
  "version": "0.1.0",
  "proxy": "http://localhost:5000",
  ...
}
javascript 复制代码
fetch('/api/data')
  .then(response => response.json())
  .then(data => console.log(data));
javascript 复制代码
axios.get('/api/data')
  .then(response => console.log(response.data));

跨域原理

相关推荐
快乐星球喂10 分钟前
使用vant轮播组件swipe
前端
泡泡oO13 分钟前
vue脱敏组件封装(适用于多种场景)——超详细手把手一步步教你使用
前端·javascript·vue.js
kiteOffice29 分钟前
使用@page 边距 at 规则 + modern-screenshot 定制打印输出内容
前端
HarryHY33 分钟前
VUE3 ref 和 useTemplateRef
前端·javascript·vue.js
穗余33 分钟前
WEB3全栈开发——面试专业技能点P7前端与链上集成
前端·web3
恋猫de小郭38 分钟前
Flutter 多版本管理工具 Puro ,它和 FVM 有什么区别?
android·前端·flutter
杨超越luckly41 分钟前
“详规一张图”——新加坡土地利用数据
前端·数据库·arcgis·信息可视化·数据分析
10年前端老司机41 分钟前
svg 保姆级入门教程
前端·svg
该用户已不存在1 小时前
OpenAI 用 Rust 重写 AI 工具,你的本地开发环境跟上了吗?
前端·javascript·rust
雪球工程师团队1 小时前
让 Bug 自动“蒸发”!我们造了个 AI 程序员同事
前端·ai编程·测试