秘密通道:配置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));

跨域原理

相关推荐
前端小巷子2 分钟前
浏览器的渲染流程:从 HTML 到屏幕显示
前端·javascript·面试
不想说话的麋鹿12 分钟前
《NestJS 实战:RBAC 系统管理模块开发 (二)》:菜单与权限路由设计
前端·node.js·全栈
前端流一12 分钟前
Babel的JSX转化插件--详解
前端
SynthWriter13 分钟前
从固定到弹性:实战Vue组件多分辨率适配全解析
前端·css
sunbyte16 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | EventKey Codes(键盘码)
前端·javascript·css·vue.js·vue
Avan_菜菜18 分钟前
Nuxt3 中使用 pnpm 安装的 NuxtImg 使用会提示找不到图片
前端·npm·nuxt.js
蟑螂学前端18 分钟前
vue3结合拖拽组件draggable-next与element-plus实现组件拖拽效果
前端
snakeshe101020 分钟前
重构迷你React:引入wipRoot与协调子节点优化
前端
恋猫de小郭21 分钟前
iOS 26 beta1 重新禁止 JIT 执行,Flutter 下的 iOS 真机 hot load 暂时无法使用
android·前端·flutter
前端Hardy1 小时前
实测!Three.js 实现动态粒子螺旋与星环环绕动画
前端·javascript