ssr前后端分离？许多人对ssr前后端分离的问题没有了解，本站就来讲讲ssr前后端分离的问题，希望我的解答对你有所帮助。
为什么很多人都出现本地环境会跨域而线上环境不跨域得情况
得到的答案都不太正确，唯独一个前后端都做得同学答的很准确。这时候我大概明白了，其实是我的后端经历帮助我很好地理解了跨域，所以我才没有特别的感觉。那么我就从这个问题出发，聊聊跨域。
前端代码如何运行
先问大家两个看起来不太相关的问题。
服务器还是哪里，直接运行在系统上嘛。答案是运行在用户电脑得浏览器里。后端看到这个问题可能就想嘲讽了，你别说，我也去群里问了，还真有不少前端认为代码运行在服务器里。接着第二个问题。
什么是跨域
好，进入正题，首先甩出跨域定义什么是跨域
太多的概念我这里就不重复赘述了，我说一下我的理解：
上面已经提到我们的代码运行在浏览器内，所以浏览器对于不同源的限制其实是对我们代码的限制。限制的标准就是请求的地址端口和当前页面的地址端口是否一致。
按路径前缀区分，那就不存在跨域问题了。
本地大家基本上都是用cli，运行项目用命令，run、start什么的。我们看vue-cli的描述
vue-cli-service serve 命令会启动一个开发服务器 (基于 webpack-dev-server) 并附带开箱即用的模块热重载 (Hot-Module-Replacement)。
这个本地运行的nginx(开发服务器)的作用就是监听localhost:8080这个地址的请求，并返回你写的代码。这里还提到附带了模块热重载，因为我们写的vue代码其实浏览器是识别不了的，不能直接返回，上线正式时要打包其实就是转化成原生的js代码，那热重载其实也是一个类似的步骤，但是它可以快速局部打包，方便你刚修改代码就能在浏览器看到效果。
后端服务的话一般要么是跑在同事的机器上，要么是自己电脑也运行着后端项目。拿后者来说，后端跑个nodejs项目的话，也是用cli跑个命令，同样也是启动了一个nginx，监听localhost:3000这个地址的请求。要注意咯，后端启动的nginx和前端启动的nginx并不是同一个，是各自运行的。
同理，如果是后端服务跑在同事的机器上那就更加做不到了，因为连域名都不能一样。
到这里我想大家应该能理解到这个问题出现的原因了。
devServer: { proxy: { '/api': { target: 'localhost:3000/', changeOrigin: true } }},
这个配置的意思是告诉前端项目的nginx，对api前缀路径的请求，都转发到localhost:3000去。也就是把请求后端的地址改成localhost:8080，然后由前端nginx接管所有请求，类似线上nginx那样，用路径前缀区分请求，然后分别处理。虽然和线上稍有不同，不过这原理上基本是一样了，真是完美的解决方案。
最典型的应该是CORS方案了。
总的来说解决跨域问题有两个方向，一种是绕开跨域限制，一种是解除跨域限制。代理属于前者，cors属于后者。nginx转发是相当于用类似postman的原理请求，是不受跨域限制的，因为跨域是浏览器的限制。所以由nginx转发就相当于绕开了限制。而cors是通过一定的配置令浏览器解除限制，需要后端配合。
如果线上环境不需要跨域，不建议大家采用解除限制的方案(CORS),因为Chrome在19年新增了跨域的限制，解除限制变得越来越麻烦
总结一下，线上环境不跨域是因为同一个nginx处理同一个请求地址，而本地环境无法做到的原因是cli无法更改，只能通过配置代理达到类似的效果。
如果你还想了解更多这方面的信息，记得收藏关注本站。
