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示例代码：

    
    
    



    This is a demo

服务端（webservice）代码：

/// 

    /// 服务端简单说明
    /// 
    [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跨域，只需要对服务端代码做如下改动：

/// 

    /// 服务端简单说明
    /// 
    [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优势也比较明显，可以实现任何类型的请求。