跨域问题来源于JavaScript的同源策略。

浅谈跨域以WebService对跨域的支持

2015/04/03 · HTML5,
JavaScript ·
WebService,
跨域

原文出处:
寒江独钓   

跨域问题来源于JavaScript的同源策略,即只有 协议+主机名+端口号
(如存在)相同,则允许相互访问。也就是说JavaScript只能访问和操作自己域下的资源,不能访问和操作其他域下的资源。

在以前,前端和后端混杂在一起,
比如JavaScript直接调用同系统里面的一个Httphandler,就不存在跨域的问题,但是随着现代的这种多种客户端的流行,比如一个应用通常会有Web端,App端,以及WebApp端,各种客户端通常会使用同一套的后台处理逻辑,即API,
前后端分离的开发策略流行起来,前端只关注展现,通常使用JavaScript,后端处理逻辑和数据通常使用WebService来提供json数据。一般的前端页面和后端的WebService
API通常部署在不同的服务器或者域名上。这样,通过ajax请求WebService的时候,就会出现同源策略的问题。

需要说明的是,同源策略是JavaScript里面的限制,其他的编程语言,比如在C#,Java或者iOS等其他语言中是可以调用外部的WebService,也就是说,如果开发Native应用,是不存在这个问题的,但是如果开发Web或者Html5如WebApp,通常使用JavaScript
ajax对WebService发起请求然后解析返回的值,这样就可能存在跨域的问题。

一般的,很容易想到,将外部的资源搬到同一个域上就能解决同源策略的限制的。即在Web网站上同时开发一个Http服务端页面,所有JavaScript的请求都发到这个页面上来,这个页面在内部使用其他语言去调用外部的WebService。即添加一个代理层。这种方式可以解决问题,但是不够直接和高效。

目前,比较常见的跨域解决方案包括JSONP (JSON with
padding)和CORS (Cross-origin
resource sharing
)。一些解决方案需要客户端和服务端配合如JSOP,一些则只需要服务端配合处理比如CORS。下面分别介绍这两种跨域方案,以及服务端WebService如何支持这两种跨域方案。

JSONP以及WebService的支持

同源策略下,某个服务器是无法获取到服务器以外的数据,但是html里面的img,iframe和script等标签是个例外,这些标签可以通过src属性请求到其他服务器上的数据。而JSONP就是通过script节点src调用跨域的请求。

当我们向服务器提交一个JSONP的请求时,我们给服务传了一个特殊的参数,告诉服务端要对结果特殊处理一下。这样服务端返回的数据就会进行一点包装,客户端就可以处理。

举个例子,服务端和客户端约定要传一个名为callback的参数来使用JSONP功能。比如请求的参数如下:

JavaScript

http://www.example.net/sample.aspx?callback=mycallback

1
http://www.example.net/sample.aspx?callback=mycallback

如果没有后面的callback参数,即不使用JSONP的模式,该服务的返回结果可能是一个单纯的json字符串,比如:

JavaScript

{ foo : 'bar' }

1
{ foo : 'bar' }

如果和服务端约定jsonp格式,那么服务端就会处理callback的参数,将返回结果进行一下处理,比如处理成:

JavaScript

mycallback({ foo : 'bar' })

1
mycallback({ foo : 'bar' })

可以看到,这其实是一个函数调用,比如可以实现在页面定义一个名为mycallback的回调函数:

JavaScript

mycallback = function(data) { alert(data.foo); };

1
2
3
4
mycallback = function(data)
         {
            alert(data.foo);
         };

现在,请求的返回值回去触发回调函数,这样就完了了跨域请求。

如果使用ServiceStack创建WebService的话,支持Jsonp方式的调用很简单,只需要在AppHost的Configure函数里面注册一下对响应结果进行过滤处理即可。

JavaScript

/// <summary> /// Application specific configuration /// This
method should initialize any IoC resources utilized by your web service
classes. /// </summary> /// <param
name="container"></param> public override void
Configure(Container container) { ResponseFilters.Add((req, res, dto)
=> { var func = req.QueryString.Get("callback"); if
(!func.isNullOrEmpty()) { res.AddHeader("Content-Type",
ContentType.Html); res.Write("<script
type='text/javascript'>{0}({1});</script>"
.FormatWith(func, dto.ToJson())); res.Close(); } }); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/// &lt;summary&gt;
        /// Application specific configuration
        /// This method should initialize any IoC resources utilized by your web service classes.
        /// &lt;/summary&gt;
        /// &lt;param name=&quot;container&quot;&gt;&lt;/param&gt;
        public override void Configure(Container container)
        {
            ResponseFilters.Add((req, res, dto) =&gt;
            {
                var func = req.QueryString.Get(&quot;callback&quot;);
                if (!func.isNullOrEmpty())
                {
                    res.AddHeader(&quot;Content-Type&quot;, ContentType.Html);
                    res.Write(&quot;&lt;script type=&#039;text/javascript&#039;&gt;{0}({1});&lt;/script&gt;&quot;
                        .FormatWith(func, dto.ToJson()));
                    res.Close();
                }
            });
        }

JSONP跨域方式比较方便,也支持各种较老的浏览器,但是缺点很明显,他只支持GET的方式提交,不支持其他Post的提交,Get方式对请求的参数长度有限制,在有些情况下可能不满足要求。所以下面就介绍一下CORS的跨域解决方案。

CORS跨域及WebService的支持

先来看一个例子,我们新建一个基本的html页面,在里面编写一个简单的是否支持跨域的小脚本,如下:

XHTML

<html xmlns=”http://www.w3.org/1999/xhtml"&gt; <head>
<title>AJAX跨域请求测试</title> </head> <body>
<input type=’button’ value=’开始测试’ onclick=’crossDomainRequest()’
/> <div id=”content”></div> <script
type=”text/javascript”> //<![CDATA[ var xhr = new
XMLHttpRequest(); var url = ‘http://localhost:8078/json/ShopUserLogin’;
function crossDomainRequest() {
document.getElementById(“content”).innerHTML = “开始……”; if (xhr) {
xhr.open(‘POST’, url, true); xhr.onreadystatechange = handler;
xhr.send(); } else { document.getElementById(“content”).innerHTML =
“不能创建 XMLHttpRequest”; } } function handler(evtXHR) { if
(xhr.readyState == 4) { if (xhr.status == 200) { var response =
xhr.responseText; document.getElementById(“content”).innerHTML =
“结果:” + response; } else {
document.getElementById(“content”).innerHTML = “不允许跨域请求。”; } }
else { document.getElementById(“content”).innerHTML +=
“<br/>执行状态 readyState:” + xhr.readyState; } } //]]>
</script> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>AJAX跨域请求测试</title>
</head>
<body>
  <input type=’button’ value=’开始测试’ onclick=’crossDomainRequest()’ />
  <div id="content"></div>
 
  <script type="text/javascript">
    //<![CDATA[
    var xhr = new XMLHttpRequest();
    var url = ‘http://localhost:8078/json/ShopUserLogin’;
    function crossDomainRequest() {
      document.getElementById("content").innerHTML = "开始……";
      if (xhr) {
        xhr.open(‘POST’, url, true);
        xhr.onreadystatechange = handler;
        xhr.send();
      } else {
        document.getElementById("content").innerHTML = "不能创建 XMLHttpRequest";
      }
    }
 
    function handler(evtXHR) {
      if (xhr.readyState == 4) {
        if (xhr.status == 200) {
          var response = xhr.responseText;
          document.getElementById("content").innerHTML = "结果:" + response;
        } else {
          document.getElementById("content").innerHTML = "不允许跨域请求。";
        }
      }
      else {
        document.getElementById("content").innerHTML += "<br/>执行状态 readyState:" + xhr.readyState;
      }
    }
    //]]>
  </script>
 
</body>
</html>

然后保存为本地html文件,可以看到,这个脚本中,对本地的服务http://localhost:1337/json/Hello 发起了一个请求,
如果使用chrome 直接打开,会看到输出的结果,不允许跨域请求。
在javascript控制台程序中同样可以看到错误提示:

威尼斯赌场手机版本 1

那么如果在返回响应头header中注入Access-Control-Allow-Origin,这样浏览器检测到header中的Access-Control-Allow-Origin,则就可以跨域操作了。

同样,如果使用ServcieStack,在很多地方可以支持CORS的跨域方式。最简单的还是在AppHost的Configure函数里面直接写入:

JavaScript

/// <summary> /// Application specific configuration /// This
method should initialize any IoC resources utilized by your web service
classes. /// </summary> /// <param
name="container"></param> public override void
Configure(Container container) { this.AddPlugin(new CorsFeature()); }

1
2
3
4
5
6
7
8
9
/// &lt;summary&gt;
/// Application specific configuration
/// This method should initialize any IoC resources utilized by your web service classes.
/// &lt;/summary&gt;
/// &lt;param name=&quot;container&quot;&gt;&lt;/param&gt;
public override void Configure(Container container)
{
    this.AddPlugin(new CorsFeature());
}

这样就可以了,相当于使用默认的CORS配置:

JavaScript

CorsFeature(allowedOrigins:"*", allowedMethods:"GET,
POST, PUT, DELETE, OPTIONS",
allowedHeaders:"Content-Type", allowCredentials:false);

1
2
3
4
CorsFeature(allowedOrigins:&quot;*&quot;,
allowedMethods:&quot;GET, POST, PUT, DELETE, OPTIONS&quot;,
allowedHeaders:&quot;Content-Type&quot;,
allowCredentials:false);

如果仅仅允许GET和POST的请求支持CORS,则只需要改为:

JavaScript

Plugins.Add(new CorsFeature(allowedMethods: "GET, POST"));

1
Plugins.Add(new CorsFeature(allowedMethods: &quot;GET, POST&quot;));

当然也可以在AppHost的Config威尼斯赌场手机版本里面设置全局的CORS,如下:

JavaScript

/// <summary> /// Application specific configuration /// This
method should initialize any IoC resources utilized by your web service
classes. /// </summary> /// <param
name="container"></param> public override void
Configure(Container container) { base.SetConfig(new EndpointHostConfig {
GlobalResponseHeaders = { { "Access-Control-Allow-Origin",
"*" }, { "Access-Control-Allow-Methods", "GET,
POST, PUT, DELETE, OPTIONS" }, {
"Access-Control-Allow-Headers", "Content-Type" }, },
}); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/// &lt;summary&gt;
/// Application specific configuration
/// This method should initialize any IoC resources utilized by your web service classes.
/// &lt;/summary&gt;
/// &lt;param name=&quot;container&quot;&gt;&lt;/param&gt;
public override void Configure(Container container)
{
 
    base.SetConfig(new EndpointHostConfig
    {
        GlobalResponseHeaders = {
            { &quot;Access-Control-Allow-Origin&quot;, &quot;*&quot; },
            { &quot;Access-Control-Allow-Methods&quot;, &quot;GET, POST, PUT, DELETE, OPTIONS&quot; },
            { &quot;Access-Control-Allow-Headers&quot;, &quot;Content-Type&quot; },
                },
    });
}

现在运行WebService,使用postman或者Chrome调用这个请求,可以看到返回的值头文件中,已经加上了响应头,并且可以正常显示返回结果了:

威尼斯赌场手机版本 2

CORS使用起来简单,不需要客户端的额外处理,而且支持Post的方式提交请求,但是CORS的唯一一个缺点是对客户端的浏览器版本有要求,支持CORS的浏览器机器版本如下:

威尼斯赌场手机版本 3

 

总结

本文介绍了JavaScript中的跨域基本概念和产生的原因,以及如何解决跨域的两种方法,一种是JSONP
一种是
CORS,在客户端Javascript调用服务端接口的时候,如果需要支持跨域的话,需要服务端支持。JSONP的方式就是服务端对返回的值进行回调函数包装,他的优点是支持众多的浏览器,
缺点是仅支持Get的方式对服务端请求。另一种主流的跨域方案是CORS,他仅需要服务端在返回数据的时候在相应头中加入标识信息。这种方式非常简便。唯一的缺点是需要浏览器的支持,一些较老的浏览器可能不支持CORS特性。

跨域支持是创建WebService时应该考虑的一个功能点,希望本文对您在这边面有所帮助,文中是使用ServiceStack来演示跨域支持的,如果您用的WCF的话,知道跨域原理的前提下,实现跨域应该不难。

 

参考资料:

https://github.com/ServiceStack/ServiceStack/wiki/Customize-HTTP-Responses

https://github.com/ServiceStack/ServiceStack/wiki/Request-and-response-filters

http://stackoverflow.com/questions/8211930/servicestack-rest-api-and-cors

http://stackoverflow.com/questions/15224038/rename-callback-parameter-for-jsonp

赞 收藏
评论

威尼斯赌场手机版本 4

发表评论

电子邮件地址不会被公开。 必填项已用*标注