【nginx学习】跨域问题解决方案

蔚落 2022-10-10 01:44 189阅读 0赞

#### 什么是跨域 ####

###### cookie ######

客户端向服务器发起请求，如果服务器需要记录该用户状态，就使用response向客户端浏览器颁发一个Cookie。客户端浏览器会把Cookie保存起来。当浏览器再请求该网站时，**浏览器把请求的网址连同该Cookie**一同提交给服务器。服务器检查该Cookie，以此来辨认用户状态。**cookie是不可以跨域名的**，隐私安全机制禁止网站非法获取其他网站的Cookie

###### 同源策略 ######

同源是指“协议+域名+端口号”三者相同，同源策略是一种约定，有Netscape公司1995年引入浏览器，它是浏览器最基本的安全功能，现在所有支持JavaScript的浏览器都会使用这个策略。如果缺少了同源策略，浏览器很容易受到 `XSS`、 `CSFR` 等攻击。“源”（origin）就是协议、域名和端口号

根据该策略，Web浏览器只允许第一个网页中包含的脚本（`JS`）访问第二个网页中的数据时，两个网页具有相同的来源。**请记住：同源策略仅适用于`JavaSript`脚本，这一点非常重要。**

同源策略不适用于HTML标签，例如![Image 1][]

###### 跨域 ######

跨域问题只存在于浏览器  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z4a2NzZG4_size_16_color_FFFFFF_t_70_pic_center]

#### 跨域常用解决方案 ####

1、`jsonp`

原理：动态生成script标签，通过`src`属性加载

缺点：不支持POST

应用场景：有些第三方数据接口可能会使用`jsonp`解决跨域问题，工作中不常用。

2、中间服务器代理

前后端分离项目，前端部署在机器A（`192.168.0.1:8000`），后端部署在机器B(`192.168.0.2:8080`)

如果前端页面的脚本直接请求机器B(`192.168.0.2:8080`)，那么就会产生跨域问题，可以在机器A（`192.168.0.1:8000`）配置代理服务器（`192.168.0.1:8000`），通过它跳转到机器B，最终机器B返回给代理服务器，代理服务器返回给浏览器，就不会出现跨域问题。

3、`CORS`跨源资源共享，服务器进行配置，加一个响应头

该方式工作中常用的解决方案。

浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息例如origin请求头，但用户无感知。

因此，实现`CORS`通信的关键时服务器。只要服务器实现了`CORS`接口，既可以跨源通信。

3.1、两种请求

浏览器将`CORS`请求分为两类：简单请求和非简单请求

只要同时满足以下两大条件，就属于简单请求，否则就是非简单请求

1.请求方法是HEAD、POST、GET三种方法之一

2.请求的头信息不能超出以下几种字段 Accept Accept-Language、Content-Language、Last-Event-ID、Content-Type（只限于三个值`application/x-www-form-urlencoded` `multipart/form-data` `text/plain`）

**浏览器**对这两种请求的处理是不一样的。

跨域源于同源策略，是浏览器遵守的，允不允许跨域是浏览器控制。报错是浏览器报错，而不是服务端。

3.1.1 简单请求

对于简单请求，浏览器直接发出`CORS`请求。具体来说，就是在请求头中加上Origin字段，`Origin`字段用来说明，本次请求来自哪个源（协议 + 域名 + 端口）。服务器根据这个值，决定是否同意这次请求。

如果`Origin`指定的源，不在许可范围内，服务器会返回一个正常的HTTP回应。浏览器发现，这个回应的头信息没有包含`Access-Control-Allow-Origin`字段

浏览器`CORS`跨源请求是否被允许，浏览器判断的是服务器响应头中是否含有`Access-Control-Allow-Origin`字段。所以解决跨域只需要在服务端的响应头中添加`Access-Control-Allow-Origin`字段

若要带cookie请求：前后端都需要设置。

例如 `java`后端配置

// 允许跨域访问的域名：若有端口需写全（协议+域名+端口），若没有端口末尾不用加'/'
    response.setHeader("Access-Control-Allow-Origin", "http://www.domain1.com"); 
    
    /**允许前端带认证cookie：启用此项后，上面的域名不能为'*'，必须指定具体的域名，否则浏览器会提示
    该字段可选。它的值是一个布尔值，表示是否允许发送Cookie。默认情况下，Cookie不包括在CORS请求之中。设为true，即表示服务器明确许可，Cookie可以包含在请求中，一起发给服务器。这个值也只能设为true，如果服务器不要浏览器发送Cookie，删除该字段即可。*/
    response.setHeader("Access-Control-Allow-Credentials", "true"); 
    
    /**该字段可选。CORS请求时，XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段，就必须在Access-Control-Expose-Headers里面指定。*/
    response.setHeader("Access-Control-Allow-Headers", "Content-Type,X-Requested-With");

3.1.2 非简单请求

非简单请求是那种对服务器有特殊要求的请求，比如请求方法是`PUT`或`DELETE`，或者`Content-Type`字段的类型是`application/json`。

非简单请求的`CORS`请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight）。

参考文档：

`application/json`。

非简单请求的`CORS`请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight）。

参考文档：

https://blog.csdn.net/yexudengzhidao/article/details/100104134

[Image 1]: 
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z4a2NzZG4_size_16_color_FFFFFF_t_70_pic_center]: /images/20221005/ee10fcc3a7be422a8bdc25098e92dd09.png