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

什么是跨域

cookie

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

同源策略

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

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

同源策略不适用于HTML标签，例如

跨域

跨域问题只存在于浏览器

跨域常用解决方案

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