文章目录

  • 浏览器的同源策略（Same-Origin Policy）
  • 通过Nginx解决跨域问题
  • nginx.conf示例
  • 通过Cors跨域资源共享解决跨域问题
  • 为什么说，浏览器执行同源策略（Same-Origin Policy），限制跨域请求的访问权限，是为了保护用户的安全和隐私？（保护服务器用户数据）
  • 如果浏览器执行同源策略（Same-Origin Policy），限制跨域请求的访问权限，是为了保护用户的安全和隐私，那为什么只需要在接口提供处，设置允许跨域，即跨域资源共享（CORS），浏览器就能访问了？（在一定程度上解除同源策略的限制，实现安全的跨域请求，增强灵活性）
  • 注意：以上说的保护用户的安全和隐私，主要是保护服务器资源（浏览器的同源策略原理、cors跨域资源共享原理）


浏览器的同源策略（Same-Origin Policy）

当浏览器发起跨域请求时，即请求的目标域名、端口或协议与当前页面的域名、端口或协议不一致时，浏览器会执行同源策略（Same-Origin Policy），限制跨域请求的访问权限。这是为了保护用户的安全和隐私（保护用户在服务器资源数据）。

在Web应用程序，比如Flask中，默认情况下，如果不设置跨域相关的头部信息，浏览器会遵循同源策略，拒绝跨域请求。因此，如果Web应用程序没有设置跨域相关的头部信息，浏览器会报跨域错误。

通过Nginx解决跨域问题

当使用Nginx作为Web页面反向代理服务器时，Nginx会将浏览器的请求转发给，例如，Flask应用程序进行处理。即使浏览器的请求和Nginx转发给Flask的请求不属同一域名、端口和协议，也不会触发浏览器的跨域限制。

通过Nginx反向代理，浏览器实际上是与Nginx进行通信，而Nginx再将请求转发给Flask应用程序。这样做的好处是可以提供额外的安全性和性能优化，同时也解决了浏览器的跨域限制问题。

换句话说，浏览器认为它正在请求的是同一个域名下的资源，而不知道Nginx实际上是将请求转发给了Flask应用程序。这样做的好处是可以绕过浏览器的跨域限制，实现跨域请求的访问。

nginx.conf示例

以下是一个nginx实现反向代理，解决跨域问题的示例：

浏览器网页地址是<ip>:7777，然后如果浏览器直接对http://192.168.116:8080/kykj/这个地址发起请求，如果这个接口没有设置允许跨域访问，由于浏览器的同源策略（Same-Origin Policy），请求将会被阻止；

但是如果用nginx将http://192.168.116:8080/kykj/代理到<ip>:7777/kykj/，如下所示，由于<ip>:7777/kykj/跟浏览器网页地址<ip>:7777域名、端口、协议均一致，不会被阻止；

数据将会按照以下路径传递：

浏览器 --> nginx --> 目标资源
                       ↓
          浏览器 <-- nginx

nginx 跨域error 500 502 error_page_cors

通过Cors跨域资源共享解决跨域问题

如果，服务器http接口设置了跨域资源共享，那么浏览器将有可能能够直接访问接口，而不会被浏览器的同源策略阻止，比如：

http://192.168.116:8080/kykj/接口如果设置了跨域资源共享，那么<ip>:7777浏览器页面将可能直接能访问到它。

但是为了深入理解，我们先看看以下几个问题：

为什么说，浏览器执行同源策略（Same-Origin Policy），限制跨域请求的访问权限，是为了保护用户的安全和隐私？（保护服务器用户数据）

浏览器执行同源策略（Same-Origin Policy）是为了保护用户的安全和隐私。同源策略是一种安全机制，它限制了一个网页中的脚本只能访问与其来源相同的资源。

同源策略的目的是防止恶意网站通过脚本访问用户的敏感信息或执行恶意操作。如果同源策略不存在，恶意网站可以通过跨域请求获取用户的个人信息、操作用户的账户，甚至在用户不知情的情况下进行恶意操作。

同源策略通过限制跨域请求的访问权限，确保了网页只能访问与其来源相同的资源，防止了恶意网站对用户的攻击。这样可以保护用户的安全和隐私，防止用户受到网络钓鱼、跨站脚本攻击（XSS）、跨站请求伪造（CSRF）等安全威胁。

需要注意的是，同源策略只存在于浏览器中，服务器之间的通信不受同源策略的限制。如果需要在不同域之间进行数据交互，可以使用跨域资源共享（CORS）等机制来实现安全的跨域请求。

如果浏览器执行同源策略（Same-Origin Policy），限制跨域请求的访问权限，是为了保护用户的安全和隐私，那为什么只需要在接口提供处，设置允许跨域，即跨域资源共享（CORS），浏览器就能访问了？（在一定程度上解除同源策略的限制，实现安全的跨域请求，增强灵活性）

虽然浏览器执行同源策略限制了跨域请求的访问权限，但是通过设置跨域资源共享（CORS），我们可以在服务器端允许特定的跨域请求。

CORS是一种机制，允许服务器在响应中设置一些特定的HTTP头部，告诉浏览器该服务器允许特定的域名或来源访问资源。当浏览器发起跨域请求时，会先发送一个预检请求（OPTIONS请求），服务器通过设置响应头部中的Access-Control-Allow-Origin、Access-Control-Allow-Methods等字段来告知浏览器是否允许跨域请求。

通过设置CORS，服务器可以控制允许哪些域名或来源访问资源，以及允许的HTTP方法等。这样可以在一定程度上解除同源策略的限制，实现安全的跨域请求。

需要注意的是，CORS只是一种机制，它需要服务器端（比如flask服务）的支持。只有在服务器端设置了允许跨域的响应头部，浏览器才会允许跨域请求。这样做的目的是为了保护用户的安全和隐私，确保只有经过授权的域名或来源可以访问资源，防止恶意网站滥用跨域请求的权限。

注意：以上说的保护用户的安全和隐私，主要是保护服务器资源（浏览器的同源策略原理、cors跨域资源共享原理）

想象一下，如果没有浏览器同源策略，有些网站会伪装成正经网站，然后骗用户在它的网页上输入账号密码，请求服务器接口，登录到正经网站的服务器，然后从服务器盗取用户的数据；

如果有了浏览器同源策略，浏览器就会判断，如果浏览器的源站，即发送请求的网页的域名（或IP地址），与请求服务器的接口的（域名（或ip地址）、端口、协议）不一致时，即为跨域请求，如果预检请求（OPTIONS请求）不通过，浏览器将会阻止该请求；

如果服务器（比如flask服务）为某接口设置了跨域资源共享，说明服务器认为该接口可能不涉及重要、敏感数据，除非为该接口配置了适当的身份验证和授权；

当浏览器访问接口检测到跨域，发送预检请求（OPTIONS请求），如果通过（服务器配置接口的CORS响应头允许该域名访问），则浏览器能顺利请求该接口并拿到数据。

服务器设置接口跨域资源共享，能有以下策略：

  • Access-Control-Allow-Origin：指定允许访问的域名。可以设置为具体的域名，例如https://example.com，也可以设置为通配符*，表示允许任何域名访问。
  • Access-Control-Allow-Methods：指定允许的HTTP方法，例如GET、POST、PUT等。
  • Access-Control-Allow-Headers：指定允许的请求头，例如Content-Type、Authorization等。
  • Access-Control-Allow-Credentials：指定是否允许发送身份凭证（如cookies、HTTP认证等）。

通过设置这些字段，服务器可以明确指定允许访问的域名、方法和请求头，从而控制跨域请求的访问权限。如果服务器没有设置这些字段，或者设置了限制访问的配置，浏览器将拒绝跨域请求的访问。