跨域问题CROS

一、跨域问题产生的原因

跨域问题的产生是因为浏览器的同源策略进行了限制，要了解跨域问题先了解下同源策略

同源策略

同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。

1、同源策略，它是由Netscape提出的一个著名的安全策略。
2、所有支持JavaScript 的浏览器都会使用这个策略。
3、所谓同源是指，域名，协议，端口均相同。
4、如果非同源，那么在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问。
5、同源策略是浏览器的行为，是为了保护本地数据不被JavaScript代码获取回来的数据污染，因此拦截的是客户端发出的请求回来的数据接收，即请求发送了，服务器响应了，但是无法被浏览器接收。

产生跨域的原因是：当前页面与发送请求接口的协议、域名、端口任一一项不相同，例如

当前页面	被访问页面或者接口	是否跨域	原因
http://test.com	https://test.com	是	协议不同
http://www.test.com	https://test.com	是	域名不同
http://test.com:8080	http://test.com:9898	是	端口不同
http://test.com/a.html	http://test.com/	否	域名、协议与端口均相同

非同源的限制

1、不可以访问非同源网页的cookie、localStorage等信息
2、不可以访问非同源网页的dom元素
3、不可以发起非同源网站的ajax请求

二、跨域问题的解决方法

CORS 是跨域资源分享（Cross-Origin Resource Sharing）的缩写。它是 W3C 标准，属于跨源 AJAX 请求的根本解决方法。
1、普通跨域请求：只需服务器端设置Access-Control-Allow-Origin
2、带cookie跨域请求：前后端都需要进行设置
【前端设置】
A、根据XhlHttpRequest.withCredentials字段判断是否带有cookie
B、使用ajax设置
xhrFields: {
withCredentials: true // 前端设置是否带cookie
},
【服务器设置】
javaWeb设置：

response.setHeader("Access-Control-Allow-Origin", http://localhost:8080”);
/**
* 如果是带cookie的请求，则加上此设置；加上此设置后，Access-Control-Allow-Origin则不可以设置为"*"
*/ 
response.setHeader("Access-Control-Allow-Credentials", "true");

nginx设置：

#如果是带cookie的请求，该设置也不可以为“*”,需要设置确定的http://localhost
add_header Access-Control-Allow-Origin "*";