前后端分离架构介绍 图文 前后端分离解决方案

        最近写项目碰到个前后端分离的问题，踩了不少坑，给大家分享一些经验。

        项目是传统的项目，没有做前后端分离，现在根据业务现状，需要改成前后端分离的形式去做开发，上来就碰到个头大的事，cookie没办法在前端后端进行传递保证登录状态，为了解决这个问题试了很多办法都不行，包括：

这种设置只能解决跨域访问接口的问题，但是解决不了跨域传递cookie的问题。

        2、后端增加一个返回cookie的接口，前端手动赋值传给后端，结果浏览器报错“refuse to unsafe cookie”。事实证明，浏览器的安全策略很到位，绕不过去。

        cookie无法传递的根本原因是浏览器对于cookie的同源策略限制，也就是必须要保证cookie是同一域名下，且path也正确，才可以使用cookie进行传递，比如www.a.com的接口返回的cookie没法在www.b.com中使用。

        最后没办法了，最后上大招了，用了Nginx做反向代理解决跨域问题，使用Nginx中也是碰到了问题给大家讲一下。

        首先说一下，十分推荐大家使用Nginx进行前后端分离，因为可以保证网站中所有请求都在一个域名之下，不用考虑跨域的问题了，而且Nginx的使用也没有很多开发初学者想的那么难，只要掌握基本的原理就可以了。

        先从网上下载Nginx：nginx: download，我用的1.20.1版本。

        然后修改Nginx配置文件，直接给到我的Nginx的配置文件：

server {
        listen       443 ssl;             //开启ssl
        server_name  dev.dachong.com;     //域名

        ssl_certificate   e:/cert/1_dev.dachong.com_bundle.crt;    //crt证书路径
        ssl_certificate_key  e:/cert/2_dev.dachong.com.com.key;    //key证书路径
        ssl_session_timeout 5m;
        ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
        ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
        ssl_prefer_server_ciphers on;

		location /webapi {  //后端url的path
			root   html;
			index  index.html index.htm;
			proxy_pass https://localhost:1001/;       //后端域名,注意要带斜杠
			proxy_cookie_path  /webapi  /;		       //修改cookie的path为全路径/	
		} 
		location / {  
			root   html;
			index  index.html index.htm;
			proxy_pass https://localhost:1000/;         //前端域名,注意要带斜杠

		} 		


   }

        因为我这个用到了https，所以需要导入证书，证书是在腾讯云下载的,配置文件里的证书路径可以用绝对路径（我用的绝对路径），也可以用相对路径，默认是相对的，cert可以放在conf文件夹下。配置文件写完了之后，直接双击nginx.exe启动就好了，so easy！

        此时在打开浏览器输入dev.dachong.com即可访问到前端页面，dev.dachong.com/webapi即可访问到后端服务器。

        要注意一点，给nginx配好域名或者用80端口也可以，不能用IP加非80端口号形式，如果你nginx没有域名，直接用的ip：端口，cookie的domain会是ip，但是调接口用的ip:端口，还是会导致cookie附带不上。