最近正在做的几个项目都用到了Ajax跨域请求，由于处于安全的角度，Firefox、Chrome等很多浏览器（IE除开）都不允许跨域请求或调用，折腾好久，终于解决了Ajax跨域请求这个蛋疼的问题，在网上也找了很久的资料，尝试N次都失败，今天在无意之中看到一篇跨域资源共享的文章，这让我轻松的解决了跨域问题，不多说。
跨域请求，就是一个站点中的资源去访问另外一个不同域名站点上的资源。这种情况很常见，比如说通过 <link> 标签加载外部样式表文件、通过 <img> 标签加载外部图片、通过 <script> 标签加载外部脚本文件等等。默认情况下，脚本访问文档属性等数据采用的是同源策略（Same origin policy）。
如果两个页面的协议、域名和端口是完全相同的，那么它们就是同源的。 如果两个页面的主域名相同，则还可以通过设置
document.domain 属性将它们认为是同源的。
随着 Web2.0 和 社交网络 的兴起，Web 应用对跨域访问的需求也越来越多，但是在脚本中进行跨域请求是受安全性限制的。比如分布式应用，主网站和二级域名网站的通信等等。
许多人还没意识到当前几乎所有的浏览器（Internet
Explorer 8+，
Firefox 3.5+，
Safari 4+和
Chrome）都可通过名为跨域资源共享（Cross-Origin
Resource Sharing）的协议支持ajax跨域调用。 对一个简单的请求，没有自定义头部，要么使用GET，要么使用POST，它的主体是text/plain,请求用一个名叫Orgin的额外的头部发送。Origin头部包含请求页面的头部（协议，域名，端口），这样服务器可以很容易的决定它是否应该提供响应。
在IE8中也是一样，用同样的方式你需要使用XDomainRequest object
var xdr = new XDomainRequest();
xdr.open("get", "http://www.msnova.net/resource/");
xdr.onload = function(){
//do something
};
xdr.send();
方法一：跨域资源共享(Cross-Origin Resource Sharing)实现Ajax跨域请求 （跨域资源共享，该规范地址：http://www.w3.org/TR/access-control/和http://dev.w3.org/2006/waf/access-control/）
1.在客服端写下面代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>AJAX跨域请求测试</title>
</head>
<body>
<input type='button' value='开始测试' onclick='cross_domain_request()' />
<div id="content"></div>
<script type="text/javascript">
var xhr = new XMLHttpRequest();
var url = 'http://www.msnova.net/resource/';
function cross_domain_request() {
document.getElementByIdx_x("content").innerHTML = "开始……";
if (xhr) {
xhr.open('GET', url, true);
xhr.onreadystatechange = handler;
xhr.send();
} else {
document.getElementByIdx_x("content").innerHTML = "不能创建 XMLHttpRequest";
}
}
function handler(evtXHR) {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var response = xhr.responseText;
document.getElementByIdx_x("content").innerHTML = "结果：" + response;
} else {
document.getElementByIdx_x("content").innerHTML = "不允许跨域请求。";
}
}
else {
document.getElementByIdx_x("content").innerHTML += "<br/>执行状态 readyState：" + xhr.readyState;
}
}
</script>
</body>
</html>
2.在服务端写（可写在前台页面，也可在后台文件中写）
<%@ Page Language="C#" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
Response.AddHeader("Access-Control-Allow-Origin", "http://www.yoursite.com:8080");
Response.Write("孟宪会向各位朋友发来贺电：你的第一个跨域测试成功啦！！！");
}
</script>
注意：在请求信息中，浏览器使用 Origin 这个 HTTP
头来标识该请求来自于 http://www.yoursite.com:8080；在返回的响应信息中，使用
Access-Control-Allow-Origin 头来控制哪些域名的脚本可以访问该资源。如果设置 Access-Control-Allow-Origin:*，则允许所有域名的脚本访问该资源。如果有多个，则只需要使用逗号分隔开即可。
注意：在服务器端，Access-Control-Allow-Origin 响应头 http://www.yoursite.com:8080 中的端口信息不能省略。
如果想实现 XMLHttpRequest 来请求任意一个网站的数据，则需设置：
Response.AddHeader("Access-Control-Allow-Origin",
"http://www.yoursite.com:8080");
<!--[if !supportLists]-->l <!--[endif]-->请求的url是PHP的：echo：header（""Access-Control-Allow-Origin: *""）
<!--[if !supportLists]-->l <!--[endif]-->请求的html的：<meta
http-equiv="Access-Control-Allow-Origin" content="*">
<!--[if !supportLists]-->l <!--[endif]-->请求的url是JSP的：response.addHeader("Access-Control-Allow-Origin","*");
这行代码就告诉浏览器，只有来自
http://www.yoursite.com:8080 源下的脚本才可以进行访问。
推荐阅读：http://blog.csdn.net/net_lover/archive/2010/01/11/5172509.aspx
这样就可以实现跨域请求了，总结一下网上的方法，我绝不错的
方法二：document.domain+iframe
对于主域相同而子域不同的例子，可以通过设置document.domain的办法来解决。具体的做法是可以在http://www.msnova.net/a.html和http:// blogs.msnova.net/b.html两个文件中分别加上document.domain
= ‘msnova.net’；
然后通过a.html文件中创建一个iframe,去控制iframe的contentDocument,这样两个js文件之间就可以“交互”了。当然这种办法只能解决主域相同而二级域名不同的情况
www.msnova.net上的a.html
document.domain = 'msnova.net';
var ifr = document.createElement_x('iframe');
ifr.src = 'http://script.msnova.net/b.html';
ifr.style.display = 'none';
document.body.appendChild(ifr);
ifr.onload = function(){
var x = ifr.contentDocument;
alert(x.getElementsByTagName_r("h1")[0].childNodes[0].nodeValue);
script.msnova.net上的b.html
document.domain
=
'msnova.net';
补充：同源策略：
|
URL
|
说明
|
是否允许通信
|
|
http://www.msnova.net/lab/a.html
http://www.msnova.net/script/b.html
|
同一域名下不同文件夹
|
允许
|
|
http://www.msnova.net/a.html
http://www.msnova.net/b.html
|
同一域名下
|
允许
|
|
http://www.msnova.net:8000/a.html
http://www.msnova.net/b.html
|
同一域名，不同端口
|
不允许
|
|
http://www.msnova.net/a.html
https://www.msnova.net/b.html
|
同一域名，不同协议
|
不允许
|
|
http://www.msnova.net/a.html
http://70.32.92.74/b.html
|
域名和域名对应ip
|
不允许
|
|
http://www.msnova.net/a.html
http://blogs.msnova.net/b.html
|
主域相同，子域不同
|
不允许
|
|
http://www.cnblogs.com/a.html
http://www.msnova.net/b.html
|
不同域名
|
不允许
|
分享到：
相关推荐
跨域的解决方案有多重JSONP、Flash、Iframe等，当然还有CORS（跨域资源共享，Cross-Origin Resource Sharing）
asp.net webforms 跨域访问
前端和后端都可以需要，给yapi测试集合的时候使用
在之前的分享的跨域资源共享的文章中，有提到要注意跨域时，如果要发送Cookie，Access-Control-Allow-Origin就不能设为*，必须指定明确的、与请求网页一致的域名。在此次项目开发中与他人协作中就遇到此类问题。 ...
前后端联调跨域问题
cross-request 3.1 YApi 跨域请求 谷歌浏览器
使用大家说的以下配置，验证无效，跨域问题仍然存在 add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Access-Control-Allow-Methods' 'GET,...
谷歌跨域插件Access-Control-Allow-Origin
跨域资源共享CORS协议介绍， cross-origin resource sharing layer
使用YApi，在线调取接口时，需要在谷歌浏览器安装插件。解压之后，将cross-request.crx文件拖到谷歌浏览器的扩展程序页面，确认即可。
主要介绍了SpringBoot跨域Access-Control-Allow-Origin实现解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
Allow-Control-Allow-Origin最新谷歌跨域扩展插件下载
ajax跨域访问是一个老问题了，解决方法很多，比较常用的是JSONP方法，JSONP方法是一种非官方方法，而且这种方法只支持GET方式，不如POST方式安全...因此，通过设置Access-Control-Allow-Origin来实现跨域访问比较简单。
跨域资源共享CORS（Cross-origin Resource Sharing），是W3C的一个标准，允许浏览器向跨源的服务器发起XMLHttpRequest请求，克服ajax请求只能同源使用的限制。关于CORS的详细解读，可参考阮一峰大神的博客：跨域资源...
设置CORS响应头实现跨域 跨源资源共享（CORS） CORS（Cross-Origin Resource Sharing），跨域资源共享。CORS 是官方的跨域解决方 案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持 ...
解决浏览器跨域请求出现No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access.问题
chrome跨域插件CORS离线下载，解压后有两个压缩包，直接把B压缩包拖放到chrome插件管理页面即可。或者解压A压缩包得到一个crx文件和一个zip文件，把这两个中的任一个拖放到插件管理页面即可。
资源包含两个文件类型的扩展程序 allow-control-allow-origin.crx 和 allow-control-allow-origin.zip 安装说明： 1. 请把 allow-control-allow-origin.crx 文件直接拖拉到扩展程序界面进行安装即可； 2. 如果浏览器...
业务场景： 前后端分离需要对接数据接口。 接口测试是在postman做的，今天才...Access-Control-Allow-Origin是HTML5中定义的一种解决资源跨域的策略。 浏览器只允许请求当前域的资源，而对其他域的资源表示不信任。那