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

跨域原理

相关推荐
要加油哦~6 分钟前
css | class中 ‘.‘ 和 ‘:‘ 的使用 | 如,何时用 &.is-selected{ ... } 何时用 &:hover{...}?
前端·css
不浪brown37 分钟前
开源!矢量建筑白模泛光特效以及全国77个大中城市的矢量shp数据获取!
前端·cesium
山有木兮木有枝_39 分钟前
JavaScript 数据类型与内存分配机制探究
前端
小小小小宇44 分钟前
前端 异步任务并发控制
前端
bysking1 小时前
【27-vue3】vue3版本的"指令式弹窗"逻辑函数createModal-bysking
前端·vue.js
LuckySusu1 小时前
【HTML篇】script`标签中的 defer 与 async:深入解析异步加载 JavaScript 的差异
前端·html
CAD老兵1 小时前
在 TypeScript 中复用已有 Interface 的部分属性:完整指南
前端
龚思凯1 小时前
Vue 3 中 watch 监听引用类型的深度解析与全面实践
前端·vue.js
于冬恋1 小时前
Web后端开发(请求、响应)
前端
red润1 小时前
封装hook,复刻掘金社区,暗黑白天主题切换功能
前端·javascript·vue.js