记录下我踩的坑:
1. 第一个坑：
React的请求代理和next的请求代理方式不一样，React是在package.json修改，以下是React的请求代理方式：
react 设置代理(proxy) 实现跨域请求
react使用proxy代理配置
我的代码，package.json
试了下，用next的话行不通，于是便继续探索，发现有博客写的不用在React里配置代理，用nodejs做接口跨域代理转发。
2. 第二个坑(未成功)：
在nodejs中配代理，我是参照的以下博客：
Next.js 配置接口跨域代理转发
Next.js 配置接口跨域代理转发
http-proxy-middleware讲解
官网
这是我的代码：
我的代码
这里注意一下，我这里踩了这个坑：
1.0.0以上引入方式:
const {createProxyMiddleware } = require('http-proxy-middleware')
1.0.0以下引入方式:
const createProxyMiddleware = require('http-proxy-middleware')
官网那个demo，写的很好，于是我就把他扒下来，3001端口启动，然后前端3000端口请求，报错，浏览器控制台显示CORS跨域了，然后我又去解决跨域。。。
3. 第三个坑(未完成)：
在谷歌或者360浏览器安装CORS插件：
https://zengmiaogen.blog.csdn.net/article/details/74332085
或者：
https://blog.csdn.net/weixin_40695725/article/details/100575598
设置谷歌的目标路径方法，也可以解决跨域。
但是不知道怎么的，这两个方法我都没走通，可能今天不在状态把。
4. 第四个坑：
用我以前的老方法，用Charles抓包工具进行转发：
-
charles的破解工具：
https://www.zzzmode.com/mytools/charles/
macOS:/Applications/Charles.app/Contents/Java/charles.jar
Windows:C:\Program Files\Charles\lib\charles.jar -
步骤：https://blog.csdn.net/ffwangkun/article/details/90519528
https://www.pianshen.com/article/605632937/
又踩了个坑，Charles监听不到本地localhost的请求：
于是采用下面的办法：https://blog.csdn.net/godot06/article/details/95932202
Localhost流量不会出现在Charles中
某些系统被硬编码为不使用代理进行本地主机流量，因此当您连接到http：// localhost /时，它不会显示在Charles中。
解决方法是连接到http://localhost.charlesproxy.com/。这指向IP地址127.0.0.1，因此它应该与localhost完全相同，但它的优势在于它将通过Charles。无论Charles是在跑还是你在使用Charles，这都会有效。如果您使用其他端口，例如8080，只需像往常一样添加它，例如localhost.charlesproxy.com:8080。
注意Preserve host这个选项不能打钩
配置tools -> Map Remote Settings
界面
第五个坑：
这下想着应该可以行了吧，没想到又出现了问题：
charles
发送请求Charles捕获不到
经过调查，我发现默认localhost就是抓不到的，改用 127.0.0.1，127.0.0.1也不行，然后我就参照以下一篇博客：
https://www.pianshen.com/article/9201302973/
才发现，原来是我粗心导致的，今天感觉整个人都不在状态。错误的原因是：浏览器的路径也要改。如下：
图片
第六个坑(这个坑很简单)：
记得要设置为路径，不然整个页面都会被跳转到你设置的Host那边。
image.png
最后大功告成，今天没看黄历，不适合写代码，整个人比较浮躁吧，明明很简单的东西，却踩坑踩这么久。总结一下不足的地方，在以前，第三个坑，配置Google跨域，我明明解决过这问题，现在居然走不通。等以后有空了，再解决第三个坑。
网友评论