Nginx解决前后端分离（适用于传统项目改前后端分离）

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

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

1、后端更改response的header参数，修改Access-Control-Allow-Origin、Access-Control-Allow-Credentials均无效，前端request请求无法自动带上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;             //开启sslserver_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的pathroot   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附带不上。

Nginx解决前后端分离（适用于传统项目改前后端分离）相关推荐

一、ubuntu-django+nginx+uwsgi：ubuntu系统部署django项目，前后端不分离项目
一.创建用户和文件夹 #创建www文件夹,所有网站项目都放到这里 $ sudo mkdir /www #创建用户组 sudo groupadd www -g 666 #创建用户 $ sudo user ...
无需CORS，用nginx解决跨域问题，轻松实现低代码开发的前后端分离
近年来,前后端分离已经成为中大型软件项目开发的最佳实践. 在技术层面,前后端分离指在同一个Web系统中,前端服务器和后端服务器采用不同的技术栈,利用标准的WebAPI完成协同工作.这种前后端分离的&q ...
Vue整合nginx：（1）开发环境npm run dev下，通过nginx解决前后端分离造成的跨域问题
Vue整合nginx:(1)开发环境npm run dev下,通过nginx解决前后端分离造成的跨域问题参考文章: (1)Vue整合nginx:(1)开发环境npm run dev下,通过nginx ...
前后端分离的项目部署到tomcat_如何在开发时部署和运行前后端分离的JavaWeb项目...
在开发中大型的JavaEE项目时,前后端分离的框架逐渐成为业界的主流,传统的单机部署前后端在同一个项目中的工程项目越来越少.这类JavaWeb项目的后端通常都采用微服务的架构,后端会被分解为诸多个小项 ...
SpringBoot+vue前后端分离博客项目
SpringBoot+vue前后端分离博客项目 Java后端接口开发 1.前言 2.新建Springboot项目 3.整合mybatis plus 第一步:导入jar包第二步:然后去写配置文件: 第 ...
easyui框架前后端交互_Vue+ElementUI+.netcore前后端分离框架开发项目实战
点击上方"前端教程",选择"星标" 每天前端开发干货第一时间送达! 转自:我心依旧.cnblogs.com/-clouds/p/11633786.html 框架 ...
一款小清新的 SpringBoot+ Mybatis 前后端分离后台管理系统项目
今日推荐推荐3个快速开发平台前后端都有项目经验又有着落了推荐一个高仿微信的项目有点屌!!一二线城市知名 IT 互联网公司名单(新版) 项目介绍前后端分离架构,分离开发,分离部署,前后端互不影 ...
【Java从0到架构师】项目实战 - 前后端分离、后端校验、Swagger、全局异常处理
项目实战 - 前后端分离.后端校验.Swagger Layui 同源策略 SpringMVC 实现 CORS 后端校验 - hibernate-validator 方法的 Model 参数校验方法的 ...
Vue+ElementUI+.netcore前后端分离框架开发项目实战
点击上方 "程序员小乐"关注公众号, 星标或置顶一起成长每天凌晨00点00分, 第一时间与你相约每日英文 Smile and stop complaining about th ...

Nginx解决前后端分离（适用于传统项目改前后端分离）

Nginx解决前后端分离（适用于传统项目改前后端分离）相关推荐

最新文章

热门文章