配置nginx后前端访问后端浏览器报跨域访问

背景：
1、SpringBoot+Vue（Vue-cli2）前后端分离；
2、前后端都在本地，只是端口不同，后端每个模块的端口也不同；
3、前后端都没有开发完，不能对前端进行打包成静态资源。

为解决前后端分离中的跨域问题做如下配置。
（1）配置nginx.conf文件如下：nginx监听9001端口并进行访问路径的正则匹配（~波浪号表示正则匹配），serviceedu接口在8001端口上，eduoss在8002端口上。

（2）前端在conf文件夹下修改dev.env.js文件中的BASE_API改为“http://localhost:9001“，使前端直接访问nginx。前端配置如下：

修改完前端配置需要重启前端项目。当重启前端项目，在浏览器中报跨域访问，这里的跨域访问是前端跨域访问nginx。报错如下：

解决：
也不能说是解决，因为配置流程就是这样，并没有错，
说一下失败的原因，注意以下几点：
1、后端接口一定要和nginx.conf中配置的接口相对应，比如nginx.conf中有/serviceedu/这个请求的代理，那后端被代理的接口也一定要在/sreviceedu/对应的路径中。也就是后端被代理接口的路径一定要和nginx中配置的路径相对应，nginx拦截到的路径在后端一定要找到对应的接口。博主这里就是没有做到对应，直接报了跨域访问。（我觉得nginx直接报找不到对应路径更合理，这里还报个跨域访问太迷惑了……）
2、即使有nginx做为代理，仍然需要在后端加上@CrossOrgin注解，因为nginx访问到后端也是跨域访问。亲测，访问去掉该注解的接口也会报跨域访问

当后端只是用了一个端口对前端提供服务的时候只使用@CrossOrgin也可以解决跨域问题，注意这里是指当后端只有这一个端口提供服务可以只使用该注解得到解决。

当后端有多个端口（或多台服务器）时，只是用@CrossOrgin注解是不行的，因为Vue框架中的conf里为了封装请求将BASE_API写死了，也就是只能访问一个端口（或一台服务器），而调用后端需要访问多个端口（多台服务器），这时候不用nginx就意味着每次调用后端接口都要修改BASE_API，显然，不能这么做。

后话：
这里整个项目都没有开发完，只是暂时使用nginx解决前后端的跨域访问，博主看过有些nginx解决前后端分离是在前后端都开发完了将前端打包生成静态资源，直接在nginx中配置这些静态资源的访问，而访问这些静态资源只是通过访问nginx直接从本地返回资源，根本没有进行请求，这时前后端都在一个端口下，根本不存在跨域访问，这样做还可以做到动静分离，减少页面请求，提高访问效率。