最近学了下 React，为什么想学 React 呢？因为我刚开始是想学 Vue 的，毕竟国内用 Vue 的公司多，但是我按照 Vue 的文档和教程学了半天，感觉很费劲，我记忆力又不好，看 Vue 里那些模板语法、表达式、指令，头都有点大了，记不住。然后上网搜了搜 React 的介绍和现状，便看到了很多 React 和 Vue 的对比、撕战，而我早已过了那个因为某个技术优劣跟别人争论的年纪了，何必呢，有这时间不如早点下班回家陪家人呢。
然后看了看 React 的教程，感觉需要记忆的东西不是很多，很快就能写出页面了，于是就开始学习了。越学越喜欢 React 这种写代码的方式了，写着感觉很爽。
因为 React 基础知识我学的差不多了，今天我写了几个页面需要调用我服务端的接口，然后就出现了跨域的问题，然后上网搜了搜解决方案，基本上都是这样说的：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
const proxy = require('http-proxy-middleware'); module.exports = function (app) { app.use( proxy('/api1', { target: 'http://localhost:5000', changeOrigin: true, // 默认值是false pathRewrite: { '^/api1': '' } }), proxy('/api2', { target: 'http://localhost:5001', changeOrigin: true, // 默认值是false pathRewrite: { '^/api2': '' } }), ) } |
文件必须在 src 目录下，文件名必须是固定的 setupProxy.js ，但我按这个写法写的的时候，总是报 CORS 错误，上网搜了很多博客和文章，都是上面这一套配置方法，有的说不能用 proxy 得用 createProxyMiddleware ，我也试了还是不行，而且控制台那里访问地址一直是 http://localhost:3000 开头，始终没有变成我的服务端地址。
搞了两三个小时，还是不行，最后是偶然发现了问题，是因为我在上面配置的请求路径前缀有问题，比如我的服务端接口地址是 http://codermr.com/api/ordery/list，但我配置的路径前缀是 /api ，这肯定是不行，这就跟在 springcloud-gateway 中配置代理地址是一样的，/api 是精确匹配，而我应该用通配符匹配，正确的配置是 /api/** ，修改完之后，重启项目就 OK 了。
请求服务端接口成功之后，我发现控制台请求的地址还是 http://localhost:3000 ，我一想，就理解了，控制台的地址肯定还是 http://localhost:3000 ，当请求到达 react 服务后再被修改成服务端接口地址。
附一张 React 官网的图片：
Support Ukraine 🇺🇦 Help Provide Humanitarian Aid to Ukraine.
