XHR跨域问题CORS解决方案（后台服务webservice）
前言
对于前后端分离的网站设计，跨域几乎是无法避免的。对于跨域的解决方案在网上也是一搜一大堆，众说纷纭，也许说的很有道理，但是很多都是不太符合自己的需要。我初次遇到这个跨域问题也是非常头疼，看着那个跨域警告们非常无奈。适合自己的才是最好的，最终我鼓捣明白了。采用后台服务webservice，前端随便一段JS脚本测试。实现确实非常简单。下面就将我的处理过程写下来，希望对需要的网友们能够有所帮助吧。
1.常见的跨域场景
URL 说明 是否允许通信
http://www.domain.com/a.js
http://www.domain.com/b.js 同一域名，不同文件或路径 允许
http://www.domain.com/lab/c.js
http://www.domain.com:8000/a.js
http://www.domain.com/b.js 同一域名，不同端口 不允许
http://www.domain.com/a.js
https://www.domain.com/b.js 同一域名，不同协议 不允许
http://www.domain.com/a.js
http://192.168.4.12/b.js 域名和域名对应相同ip 不允许
http://www.domain.com/a.js
http://x.domain.com/b.js 主域相同，子域不同 不允许
http://domain.com/c.js
http://www.domain1.com/a.js
http://www.domain2.com/b.js 不同域名 不允许
2. CORS 简介
CORS：全称"跨域资源共享"（Cross-origin resource sharing）。
CORS需要浏览器和服务器同时支持，才可以实现跨域请求，目前几乎所有浏览器都支持CORS，IE则不能低于IE10。CORS的整个过程都由浏览器自动完成，前端无需做任何设置，跟平时发送ajax请求并无差异。so，实现CORS的关键在于服务器，只要服务器实现CORS接口，就可以实现跨域通信。
浏览器默认的安全限制为同源策略，即JavaScript或Cookie只能访问同源（相同协议，相同域名，相同端口）下的内容。但由于跨域访问资源需要，出现了CORS机制，这种机制让web服务器能跨站访问控制，使跨站数据传输更安全。CORS需要阅览器和服务器同时支持，目前，主流的阅览器都支持cors。
更多信息请查阅：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS
3.跨域Demo
客户端请求 HTML示例代码：
<html>
<head>
<meta charset="utf-8" />
<title>This is Demo</title>
<script>
function ss() {
console.log("开始 测试");
var url = "http://localhost:27992/KYZ_BXP.asmx/HelloWorld?" + Math.random();
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
console.log("响应结果：" + xhr.readyState);
console.log("状态码结果：" + xhr.status);
if (xhr.readyState === 4) {
if (xhr.status == 200) {
alert(xhr.responseText);
}
}
}
xhr.open('get', url, true);
// xhr.setRequestHeader('X-Custom-Header', 'value');
xhr.send(null);
}
ss();
</script>
</head>
<body>
This is a demo
</body>
</html>
服务端（webservice）代码：
/// <summary>
/// 服务端简单说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消对下行的注释。
// [System.Web.Script.Services.ScriptService]
public class KYZ_BXP : System.Web.Services.WebService
{
[WebMethod]
public string HelloWorld()
{
return "Hello World123";
}
}
运行结果：
捕获01.JPG
捕获02.JPG
从中可以看出，由于客户端访问请求和服务端响应接口端口不同，属于跨域请求类型，结果就出现了跨域警告。实际返回的数据被浏览器劫持了，无法正常显示弹窗结果。
要想实现CORS跨域，只需要对服务端代码做如下改动：
/// <summary>
/// 服务端简单说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消对下行的注释。
// [System.Web.Script.Services.ScriptService]
public class KYZ_BXP : System.Web.Services.WebService
{
[WebMethod]
public string HelloWorld()
{
Context.Response.AddHeader("Access-Control-Allow-Origin", "*");//关键 没有这一句的设置 就无法完成跨域请求
Context.Response.AddHeader("Access-Control-Allow-Methods", "*");
Context.Response.AddHeader("Access-Control-Allow-Headers", "x-requested-with,content-type");
return "Hello World123";
}
}
注意：修改代码后，需要将服务重启一下。
然后再试一下，结果如下：
捕获03.JPG
捕获04.JPG
可以看到，请求的数据已经能够正常的加载弹出。XHR跨域问题已经解决！
Demo 运行环境：.NET4.0 WebService; .Net4.0 Web;狐火浏览器64位 71.0。
4.最后
总的来说，使用CORS简单请求，非常容易，对于前端来说无需做任何配置，与发送普通ajax请求无异。CORS的配置，完全在后端设置，配置起来也比较容易，目前对于大部分浏览器兼容性也比较好。CORS优势也比较明显，可以实现任何类型的请求。
