一、同源策略
在不同的URL中，如果协议、域名、端口相同，那么这些URL则为同源，如果协议、域名、端口其中有一项不同，与路径不同无关，则为不同源，不同源的URL发送请求则为跨域请求。在浏览器中跨域采用同源策略，除非JS的<script>、图片的<img>、前端框架<iframe>、css的外部样式<link>等，可以发现这些不受同源策略的限制可以加载跨域资源的共同点就是有src属性，除了以上的特殊以外，同源策略不允许加载不同源的页面以及脚本。
下表给出了相对http://a.xyz.com/dir/page.html同源检测的示例:
URL 结果 原因
http://a.xyz.com/dir2/other.html 成功 协议，端口（如果有指定）和域名都相同
http://a.xyz.com/dir/inner/another.html 成功 协议，端口（如果有指定）和域名都相同
https://a.xyz.com/secure.html 失败 不同协议 ( https和http )
http://a.xyz.com:81/dir/etc.html 失败 不同端口 ( 81和80)
http://a.opq.com/dir/other.html 失败 不同域名 ( xyz和opq)
场景：
- 我们打开了一个天猫并且登录了自己的账号，这时我们再打开一个天猫的商品，我们不需要再进行一次登录就可以直接购买商品，因为这两个网页是同源的，可以共享登录相关的 cookie 或 localStorage 数据；
- 如果你正在用支付宝或者网银，同时打开了一个不知名的网页，如果这个网页可以访问你支付宝或者网银页面的信息，就会产生严重的安全的问题。显然浏览器不允许这样的事情发生；
- 想必你也有过同时登陆好几个 qq 账号的情况，如果同时打开各自的 qq 空间浏览器会有一个小号模式，也就是另外再打开一个窗口专门用来打开第二个 qq 账号的空间。
很明显，第1个和第3个例子中，不同的天猫商店和 qq 空间属于同源，可以共享登录信息。qq 为了区别不同的 qq 的登录信息，重新打开了一个窗口，因为浏览器的不同窗口是不能共享信息的。而第2个例子中的支付宝、网银、不知名网站之间是非同源的，所以彼此之间无法访问信息，如果你执意想请求数据，会提示异常：
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
以上场景借鉴：https://www.cnblogs.com/phpfeng/p/9374052.html
同源策略分两种：
-
DOM 同源策略：禁止对不同源页面 DOM 进行操作。这里主要场景是 iframe 跨域的情况，不同域名的 iframe 是限制互相访问的。
场景：
如果没有 DOM 同源策略，也就是说不同域的 iframe 之间可以相互访问，那么黑客可以这样进行攻击： -
做一个假网站，里面用 iframe 嵌套一个银行网站
http://mybank.com。 -
把 iframe 宽高啥的调整到页面全部，这样用户进来除了域名，别的部分和银行的网站没有任何差别。
-
这时如果用户输入账号密码，我们的主网站可以跨域访问到
http://mybank.com的 dom 节点，就可以拿到用户的账户密码了。 -
XMLHttpRequest 同源策略：禁止使用 XHR 对象向不同源的服务器地址发起 HTTP 请求。
同源策略是浏览器的一种安全机制，异步请求、同步请求去加载不源的数据也会出现同源策略。（跨域问题）
场景：
如果 XMLHttpRequest 同源策略，那么黑客可以进行 CSRF（跨站请求伪造） 攻击： -
用户登录了自己的银行页面
http://mybank.com，http://mybank.com向用户的 cookie 中添加用户标识。 -
用户浏览了恶意页面
http://evil.com，执行了页面中的恶意 AJAX 请求代码。 -
http://evil.com向http://mybank.com发起 AJAX HTTP 请求，请求会默认把http://mybank.com对应 cookie 也同时发送过去。 -
银行页面从发送的 cookie 中提取用户标识，验证用户无误，response 中返回请求数据。此时数据就泄露了。
-
而且由于 Ajax 在后台执行，用户无法感知这一过程。
因此，有了浏览器同源策略，我们才能更安全的上网。
几种跨域以及跨域的解决方法：
https://www.cnblogs.com/laixiangran/p/9064769.html
二、ajax跨域解决思路以及方案（图片来源慕课网）
跨域的三大原因（同时满足）
浏览器限制
跨域
XHR请求
解决思路：
- 让浏览器不做限制，指定参数，让浏览器不做校验，但该方法不太合理，它需要每个人都去做改动。
- 不要发出XHR请求，这样就算是跨域，浏览器也不会报错，解决方案是JSONP，通过动态创建一个script，通过script发出请求
- 在跨域的角度：一种是被调用方修改代码，加上字段，告诉浏览器，支持跨域，支持调用方调用。第二种是调用方使用代理，在a域名里面的的请求地址使用代理指定到b域名。第一种是支持跨域，第二种是隐藏跨域
被调用方支持跨域解决思路：基于http协议关于跨域方面的要求而做的修改，从a域名调用b域名时，在b域名返回的信息里加些字段，告诉浏览器b允许a调用。浏览器通过校验就不会报跨域安全问题。 调用方隐藏跨域解决思路：当域名不是自己公司的时，可以用此方法解决。通过一个代理，使得从浏览器发出的请求都是a域名的请求，在代理里面把指定的url转到b域名里面,使得在浏览器上看上去就是同一个域名。
- 什么是跨域问题? 现在开发应用程序思路大都是将客户端和服务端进行分离，通过restfull约定通信，也就是客户端、服务端分别部署到不同服务器，当用户通过浏览器访问客户端，客户端在调用请求不同域服务器端XMLHttpRequest对象时，请求会出错，这就是跨域问题。 引起跨域问题的三个条件： 1.浏览器访问 2.请求XMLHttpRequest对象 3.跨域，用户-客户端(a.com)-服务端(b.com) 2.解决跨域问题方法。 以解决跨域为主 1.修改服务端-被调用端 过滤器，http服务器，spring 2.修改客户端-调用端 http服务器-隐藏域
跨域解决方案：
1、浏览器禁止检查：命令行参数启动
（1）终端输入：C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security
（2）如果方法（1）不行，通过everyting软件找到chrome.exe所在的路径，在chrome.exe所在的路径按下shift键，点击右键，点击“在此处打开命令行窗口”，然后输入chrome --disable-web-security
2、jsonp
（1）jsonp：JSON with Padding.
$.ajax({
type:”post”,//请求方法可以是post,get,和其他方法
url:”emp/empServlert”,//请求地址
data:{
id:1,
name:zzz
},//传入后台参数
dataType:”jsonp”,//数据格式，jsonp为跨域访问
async: false,//true为异步，false为同步
success:function(data){//成功回调方法
data……
},
Error:function(){//失败回调方法
}
})
（2）jsonp返回的是js代码，不是json对象。
（3）content-type：发送信息至服务器时内容编码类型，即客户端发送请求数据的类型。
（4）ajax的属性添加cache:true，表示结果可以被缓存，请求的链接中就没有_=某个值。
（5）jsonp的弊端
①需要服务器改动代码。
②只支持GET请求。
③发送的不是xhr请求。
3、跨域-被调用方解决
（1）静态服务器/http服务器：apache或nginx
（2）tomcat：应用服务器
（3）被调用方解决的3种方案：
①服务器端实现。
②ngix配置。
③apache配置。
（4）被调用方filter解决方案：
①如果是简单请求，浏览器是先执行再判断。如果是非简单请求，先发一个预检命令，检查通过之后，才会真正把请求发出去。
②跨域请求的请求头中多一个origin。
4、跨域-调用方解决（隐藏跨域）
补充：
JSONP是如何实现跨越请求的？
我们知道非同源环境下会请求，浏览器的同源策略机制会不允许，那么为什么使用jsonp就可以进行跨域了？
同源策略不会拦截带src的请求，比如前面我们讲到的图片<img>，那么在js里使用src就进行请求就可以不被同源策略拦截了，jsonp就是采用这种方式
JS 代码：
<script>
//jsonp回调方法，一定要写在jsonp请求前面
function callback(txt){
alert(txt);
}
</script>
<script src ="/demo/testJsonp.shtml" type="text/javascript" ></script>
Java 代码（后端）：
/**
* jsonp 测试
* @return
*/
@RequestMapping(value="testJsonp",method=RequestMethod.GET)
@ResponseBody
public String testJsonp(){
return "callback('test jsonp');";
}
标签：浏览器,跨域,ajax,同源,http,com,请求 来源： https://blog.csdn.net/qq_37432174/article/details/96192337
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。