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

跨域原理

相关推荐
吃饺子不吃馅14 分钟前
root.render(<App />)之后 React 干了哪些事?
前端·javascript·面试
鹏多多23 分钟前
基于Vue3+TS的自定义指令开发与业务场景应用
前端·javascript·vue.js
江城开朗的豌豆32 分钟前
Redux 与 MobX:我的状态管理选择心路
前端·javascript·react.js
Cosolar37 分钟前
前端如何实现VAD说话检测?
前端
CodeSheep1 小时前
当了leader才发现,大厂最想裁掉的,不是上班总迟到的,也不是下班搞失联的,而是经常把这3句话挂在嘴边的
前端·后端·程序员
吃饺子不吃馅1 小时前
✨ 你知道吗?SVG 里藏了一个「任意门」——它就是 foreignObject! 🚪💫
前端·javascript·面试
IT_陈寒2 小时前
Python开发者必须掌握的12个高效数据处理技巧,用过都说香!
前端·人工智能·后端
gnip9 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
一只叫煤球的猫10 小时前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试
excel11 小时前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端