Spring boot + React 同端口运行

前言

Spring boot 和 React 运行方式有很多种，现在最常见的是各自运行（非同一端口或不同IP），jar包挂一个端口,React app是nginx上或者tomcat挂的。但是这样运行会出现跨域问题，有时候为了方便调试或者各种各样原因，React项目可以直接丢在Spring boot下运行。

解决方案

1.React项目（我这里是用create-react-app搭建的项目），要扔上jar包，将路由改为HashRouter（一般使用的是BrowserRouter）。这个改的很快，就几秒钟的问题。至于为什么要用HashRouter，因为他是锚点访问，不然BrowserRouter访问方式和jar包挂统一端口，网页访问会被当成请求处理掉。（后台当然可以修改，但是有这个功夫还不如直接丢nginx上，改代理来的更快）

image.png

2.前端直接 npm build 或 yarn build,找到打包目录，大致如下

image.png

3.在Spring boot中的resources目录下创建public，大致如下

image.png

4.直接全部复制到public文件目录下

5.运行Spring boot项目，访问端口

image.png image.png

6.结尾

PS

• 注意:接口不能有如localhost:xxxx/这样的形式，否则会被占用，跳不进网页，下图:

image.png