跨域问题解决方案Nginx &CORS流程详解(vue+egg案例演示)

什么是跨域?

发送ajax请求时,浏览器要求当前网页和服务器必须是同源的,同源是指协议/一级域名/二级域名/端口号 必须一致,有一个不同就是跨域.
如http://192.168.0.107:3001和http://192.168.0.107:3000,由于3000端口和3001端口不同, 所以就是跨域

前后端分离项目中cookie的跨域问题

项目分为混合开发和前后端分离开发两种类型的项目

• 混合开发的项目:是前端代码和后端代码都放在同一个项目中,那么前后端同源,不存在跨域问题
• 前后端分离的项目是把前端代码放在一个项目中,把后端代码放在另一个项目中,那么前后端不同源,因为Cookie是不能跨域使用的, 所以在前后端分离开发的时候, 我们当前的代码就会出现问题:如前端浏览器页面运行在http://192.168.0.107:3000上,后端登陆接口是http://192.168.0.107:3001/login,那么从前端浏览器页面向后端发送登陆请求,打开控制台发现并没有cookie,不做跨域解决措施的情况下,只有从http://192.168.0.107:3001前端页面(即前后端同源的情况下)发送请求,才能接收到服务器下发的cookie.

解决跨域问题的两种方式

1.通过Nginx反向代理解决跨域问题

首先解释一下正向代理和反向代理:

• 正向代理:顺着请求的方向进行的代理, 我们称之为正向代理
  例如: 访问某xx网站,我是一个用户，我访问不了, 但是我可以访问一台海外的服务器, 这台海外服务器又可以访问xx网站,那么’我’就可以先访问’海外的服务器’, 再通过’海外的服务器’(代理服务器)访问xx网站, xx网站服务器将数据返回给海外服务器,海外服务器再将该数据返回给用户,这就是正向代理;在正向代理中, 代理服务器是为用户服务的 (对于xx网站来说, 它并不知道真正访问自己的是谁, 只知道有一台