跨域产生的原因和解决方法

跨域产生的原因和解决方法

1.跨域问题的由来

何谓同源:URL由协议、域名、端口和路径组成，如果两个URL的协议、域名和端口相同，则表示它们同源。浏览器的同源策略，从一个域上加载的脚本不允许访问另外一个域的文档属性 ，是浏览器上为安全性考虑实施的非常重要的安全策略。举个例子：比如一个恶意网站的页面通过iframe嵌入了银行的登录页面（二者不同源），如果没有同源限制，恶意网页上的javascript脚本就可以在用户登录银行的时候获取用户名和密码。

2.跨域的影响范围

在浏览器中，<script>、<img>、<iframe>、<link>等标签都可以加载跨域资源，而不受同源限制，

但浏览器会限制脚本中发起的跨域请求。比如，使用 XMLHttpRequest 对象和Fetch发起 HTTP 请求就必须遵守同源策略。

Web 应用程序通过 XMLHttpRequest 对象或Fetch能且只能向同域名的资源发起 HTTP 请求，而不能向任何其它域名发起请求。

不允许跨域访问并非是浏览器限制了发起跨站请求，而是跨站请求可以正常发起，但是返回结果被浏览器拦截了。

最好的例子是CSRF跨站攻击原理，请求是发送到了后端服务器,无论是否设置允许跨域,

有些浏览器不允许从HTTPS跨域访问HTTP，比如Chrome和Firefox，这些浏览器在请求还未发出的时候就会拦截请求,这是特例。

此外父页面js操作不同域的iframe属性时，也会受到跨域限制

原因：

　　是指a页面想获取b页面资源，如果a、b页面的协议、域名、端口、子域名不同，或是a页面为ip地址，b页面为域名地址，所进行的访问行动都是跨域的，而浏览器为了安全问题一般都限制了跨域访问，也就是不允许跨域请求资源。

解决方案有十种：

　　1.通过Jsonp实现跨域 （常用）

　　2.通过修改document.domain来跨子域

　　3.window.name+iframe跨域

　　4.跨文档消息传输window.postMessage

　　5.通过CORS（跨域资源共享）解决AJAX跨域

　　6.通过Nginx反向代理

　　7.Nodejs中间件代理(两次跨域)

　　8.websocket协议跨域

　　9.localhost.hash+iframe跨域

　　10.通过设置Access-Control-Allow-Origin

关于Iframe如何跨域访问Cookie和Session的解决方法

假如在网站A下通过iframe或ajax调用B下的内容时，默认情况下IE会阻止B写任何Cookie//B里的被调用的页面需要写P3P头，从而解除IE对写Cookie的阻止 context.Response.AddHeader("P3P", "CP=CAO PSA OUR"); //A里通过ajax调用

www.B.com

里的内容时，是跨域访问，需要使用jsonp,为配合其工作需要添加下面两句，生成jsonp返回 context.Response.ContentType = "text/plain"; context.Response.Write(string.Format("{0}('OK')", context.Request["callback"])); //jsonp调用进行跨域访问 jQuery.ajax({ url: url, type: 'GET', data: data, dataType: 'jsonp', success: function (data) { window.location.href = toURL; } });