前后端分离的Cookie的事项

前后端分离了是不是服务器就不能设置Cookie了？

错误。前后端分离并不意味着服务器不能设置Cookie。在前后端分离的架构中，前端通常是通过API调用与后端进行通信，而不是直接渲染后端生成的HTML页面。这导致服务器无法像传统的服务器端渲染应用程序那样，在响应中设置Cookie。

然而，服务器仍然可以设置Cookie，并通过响应中的Set-Cookie标头将其发送给客户端。在前后端分离架构中，这通常是在登录或认证成功后进行的操作，以便服务器可以将身份验证令牌或会话信息存储在Cookie中，并在随后的请求中进行验证。

前端应用程序（通常是JavaScript）可以从响应中读取并处理这些Cookie，然后在后续的API请求中将它们作为请求标头的一部分发送回服务器。这允许服务器在后续请求中使用Cookie来验证用户身份或提供其他会话相关的功能。

总结起来，尽管前后端分离架构改变了服务器设置Cookie的方式，但服务器仍然可以在响应中设置Cookie，并通过API请求和响应来处理会话和用户身份验证。

前后端分离服务器也可以给浏览器设置cookie

首先要理解服务器是如何给浏览器设置cookie的

比例后端中以php为例，是调用了setcookie();

但这只是表象，具体设置机制是给返回浏览器的header中添加了set-cookie信息，例如：

1.  
   HTTP/1.1 200 OK
2.  
   Content-type: text/html
3.  
   Set-Cookie: name=value
4.  
   Set-Cookie: name2=value2; Expires=Wed, 09 Jun 2021 10:18:14 GMT

浏览器是根据response header来设置cookie，所以跟前后端分离没有关系。

前端服务器和后台服务器跨域情况

当前端服务器和后台服务器存在跨域情况时，设置Cookie会受到限制。跨域是指在浏览器中，前端应用程序的域与后台服务器的域不同。

在跨域情况下，默认情况下，浏览器会阻止通过响应的Set-Cookie标头设置跨域Cookie。这是为了保护用户隐私和安全。浏览器遵循同源策略，该策略要求网页只能访问与其来源相同的资源。

然而，有一些方法可以绕过这个限制：

CORS（跨域资源共享）：后台服务器可以通过设置适当的CORS响应标头来允许特定的跨域请求，并包括允许携带Cookie。例如，可以通过设置"Access-Control-Allow-Origin"标头为前端服务器的域，以及设置"Access-Control-Allow-Credentials"标头为"true"来允许跨域请求携带Cookie。

代理服务器：前端服务器可以通过代理服务器来转发请求，将跨域请求发送到后台服务器，并在代理服务器上设置Cookie。这样前端服务器和后台服务器之间的通信就不会被浏览器的同源策略限制。

需要注意的是，如果存在跨域情况，设置Cookie时需要考虑安全性和隐私性。确保只在必要的情况下允许跨域请求携带Cookie，并对请求进行适当的验证和授权处理，以防止潜在的安全漏洞。

如何判定为跨域

在前端开发中，判定是否为跨域请求通常基于以下三个因素：协议、域名和端口号。如果任何一个因素不同，则认为是跨域请求。

举例来说，假设前端应用程序正在运行在 http://a.log.com 上，下面是一些示例，用于判定是否为跨域请求：

跨协议请求：如果前端应用程序是通过 http://a.log.com 运行，但请求的 URL 是以 https:// 开头的，例如 https://b.log.com/api/data，则被认为是跨域请求，因为协议不同。

跨域名请求：如果前端应用程序是通过 http://a.log.com 运行，但请求的 URL 是以 http://b.log.com/api/data 开头的，或者只是使用了不同的二级域名，例如 http://subdomain.log.com/api/data，则被认为是跨域请求。

跨端口请求：如果前端应用程序是通过 http://a.log.com:8000 运行，但请求的 URL 是以 http://a.log.com:9000/api/data 开头的，或者使用了不同的端口号，则被认为是跨域请求。

需要注意的是，浏览器中的同源策略会限制跨域请求的访问，这是出于安全考虑。可以通过使用CORS（跨域资源共享）或其他跨域解决方案来允许跨域请求的访问。

前端服务器通过代理服务器来转发请求并处理跨域

在前端服务器上配置代理服务器设置：前端服务器需要配置一个代理服务器来接收跨域请求，并将其转发到后台服务器。这可以通过使用常见的代理服务器软件（如Nginx、Apache）或自定义的代理服务器脚本来实现。

前端应用程序发送请求到代理服务器：前端应用程序发送跨域请求时，将请求发送到前端服务器上的代理服务器地址，而不是直接发送到后台服务器。例如，前端应用程序发送请求到 http://frontend-server/proxy。

代理服务器转发请求到后台服务器：代理服务器接收到前端应用程序的请求后，将其转发到后台服务器的对应地址。例如，代理服务器将请求转发到 http://backend-server/api。

后台服务器处理请求并设置Cookie：后台服务器接收到代理服务器转发的请求后，进行相应的处理，并在响应中设置Cookie（如果需要）。后台服务器可以根据业务逻辑处理请求，并在响应中包含 Set-Cookie 标头以设置Cookie。

代理服务器将响应返回给前端应用程序：后台服务器处理请求后，将响应发送回代理服务器。

代理服务器将响应返回给前端应用程序：代理服务器收到后台服务器的响应后，将其返回给前端应用程序。前端应用程序在收到响应后可以进行相应的处理。

通过使用代理服务器，前端应用程序可以绕过浏览器的同源策略限制，并实现前端与后台服务器之间的跨域通信，同时允许Cookie的设置和处理。具体的实现细节和配置方式可能因所选代理服务器软件或自定义脚本而有所不同，因此需要根据具体情况进行相应的配置和开发。

同源策略限制说明

实际上，同源策略主要是由浏览器实施的一种安全机制，用于限制不同源（协议，域名，端口）之间的客户端脚本访问。同源策略确实会限制浏览器中前端应用程序对不同源服务器的访问，但在服务器与服务器之间的通信中，同源策略并不适用。

当服务器与服务器之间进行通信时，不受浏览器的同源策略的限制。服务器之间的通信可以自由地进行跨域请求和响应，并共享数据，因为服务器可以直接访问资源而无需经过浏览器的安全限制。

因此，如果在前端应用程序中使用代理服务器来转发请求到后台服务器，代理服务器与后台服务器之间的通信不受浏览器的同源策略的限制。这允许在代理服务器上进行Cookie的设置和处理，以及实现跨域请求和响应的处理。

这篇好文章是转载于：学新通技术网