前端的跨域解决方案


跨域解决方案一：使用CORS实现跨域

跨站HTTP请求(Cross-site HTTP request)是指发起请求的资源所在域不同于请求指向的资源所在域的HTTP请求。

比如说，我在Web网站A(www.a.com)中通过<img>标签引入了B站的资源(www.b.com/images/1.jpg)，那么A站会向B站发起一个跨站请求。

这种图片资源的跨站请求是被允许的，类似的跨站请求还有CSS文件，JavaScript文件等。

 

但是如果是在脚本中发起HTTP请求，出于安全考虑，会被浏览器限制。比如，使用 XMLHttpRequest 对象发起 HTTP 请求就必须遵守 同源策略。

所谓“同源策略”是指Web应用程序只能使用 XMLHttpRequest 对象向发起源所在域内发起HTTP请求，这个请求源和请求对象必须在一个域内。

举例来说，http://www.a.com，这个网址的协议是http，域名是www.a.com，端口默认是80。那么以下是它的同源情况：

  • http://www.a.com/index.html 同源
  • https://www.a.com/a.html 不同源(协议不同)
  • http://service.a.com/testService/test 不同源(域名不同)
  • http://www.b.com/index.html 不同源(域名不同)
  • http://www.a.com:8080/index.html 不同源(端口不同)

为了开发出更强大，更丰富的Web应用，跨域请求是很常见的，那么如何在不舍弃安全的情况下进行跨域请求呢？

W3C推荐了一种新的机制，即跨源资源共享(Cross-Origin Resource Sharing (CORS))。

跨源资源共享(CORS)是通过客户端+服务端协作声明的方式来确保请求安全的。服务端会在HTTP请求头中增加一系列HTTP请求参数(例如Access-Control-Allow-Origin等)，来限制哪些域的请求和哪些请求类型可以接受，而客户端在发起请求时必须声明自己的源(Orgin)，否则服务器将不予处理，如果客户端不作声明，请求甚至会被浏览器直接拦截都到不了服务端。服务端收到HTTP请求后会进行域的比较，只有同域的请求才会处理。

一个使用CORS实现跨域请求的示例：

客户端：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function getHello() {
    var xhr = new XMLHttpRequest();
    xhr.open("post", "http://b.example.com/Test.ashx", true);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");　　　
    // 声明请求源
    xhr.setRequestHeader("Origin", "http://a.example.com");
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var responseText = xhr.responseText;
            console.info(responseText);
        }
    }
    xhr.send();
}

服务端：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
public class Test : IHttpHandler
   {
 
       public void ProcessRequest(HttpContext context)
       {
           context.Response.ContentType = "text/plain";
           // 声明接受所有域的请求
           context.Response.AddHeader("Access-Control-Allow-Origin", "*");
           context.Response.Write("Hello World");
       }
 
       public bool IsReusable
       {
           get
           {
               return false;
           }
       }
   }

在Web API中启用跨域访问

CORS是服务端和客户端协作声明来确保请求安全的，因此，如果需要在Web API中启用CORS也需要进行相应配置。好在微软的ASP.NET团队提供了官方的支持跨域的解决方案，只需要在NuGet中添加即可。

前端的跨域解决方案

然后在App_Start/WebApiConfig.cs进行如下配置即可实现跨域访问：

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
public static class WebApiConfig
    {
        public static void Register(HttpConfiguration config)
        {
            // Web API 配置和服务
            // 将 Web API 配置为仅使用不记名令牌身份验证。
            config.SuppressDefaultHostAuthentication();
            config.Filters.Add(new HostAuthenticationFilter(OAuthDefaults.AuthenticationType));
 
            // Web API 路由
            config.MapHttpAttributeRoutes();
 
            config.Routes.MapHttpRoute(
                name: "DefaultApi",
                routeTemplate: "api/{controller}/{id}",
                defaults: new { id = RouteParameter.Optional }
            );
 
            // 允许Web API跨域访问
            EnableCrossSiteRequests(config);
 
            config.Formatters.JsonFormatter.SupportedMediaTypes.Add(new MediaTypeHeaderValue("text/html"));
        }
 
        private static void EnableCrossSiteRequests(HttpConfiguration config) {
            var cors = new EnableCorsAttribute(
              origins: "*",
              headers: "*",
              methods: "*"
              );
            config.EnableCors(cors);
        }
    }

由于IE10以下浏览器不支持CORS，所以目前在国内CORS并不是主流的跨域解决方案，但是随着windows 10的发布，IE的逐渐衰落，可以预见，在不远的将来CORS将成为跨域的标准解决方案之一。



跨域解决方案二：使用JSONP实现跨域

跨域的实现方式有多种，除了 上篇文章 提到的CORS外，常见的还有JSONP、HTML5、Flash、iframe、xhr2等。

这篇文章对JSONP的跨域原理进行了探索，并将我的心得记录在这里和大家分享。

JSONP跨域原理探秘

我们知道，使用 XMLHTTPRequest 对象发送HTTP请求时，会遇到 同源策略 问题，域不同请求会被浏览器拦截。

那么是否有方法能绕过 XMLHTTPRequest 对象进行HTTP跨域请求呢？

换句话说，不使用 XMLHTTPRequest 对象是否可以发送跨域HTTP请求呢？

细心的你可能会发现，像诸如：

<script type="text/javascript" src="http://www.a.com/scripts/1.js"></script>

<img src="http://www.b.com/images/1.jpg" />

<link rel="stylesheet" href="http://www.c.com/assets/css/1.css" />

这种标签是不会遇到"跨域"问题的，严格意义上讲，这不是跨域，跨域是指在脚本代码中向非同源域发送HTTP请求，这只是跨站资源请求。

那么，我们是否可以利用跨站资源请求这一方式来实现跨域HTTP请求呢？

以<script></script>标签为例进行探索，先看一段代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jsonp demo</title>
    <!-- JavaScript片断1 -->
    <script type="text/javascript">
        function handler(data) {
            alert(data);
            // our code here...
        }
    </script>
 
    <!-- JavaScript片断2 -->
    <script type="text/javascript">
        handler('success');
    </script>
</head>
<body>
    A JSONP demo.
</body>
</html>

这段代码中，有2个JavaScript片断，第1个片断中定义了一个处理函数handler()，这个处理函数比较简单，没有对数据做任何处理，只是把它alert出来；第2个片断调用了它，运行这个页面浏览器会弹出"success"。

我们假设第2个JavaScript片断存储在别的地方，然后我们使用<script src="" />的方式把它引入进来，像这样：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jsonp demo</title>
    <!-- JavaScript片断1 -->
    <script type="text/javascript">
        function handler(data) {
            alert(data);
            // our code here...
        }
    </script>
 
    <!-- JavaScript片断2 -->
    <script type="text/javascript" src="http://service.a.com/script/1.js"></script>
</head>
<body>
    A JSONP demo.
</body>
</html>

service.a.com/script/1.js：

1
handler('success');

这种方法和把JavaScript代码直接写在页面是等效的，但是，我们由此可以联想到什么？

我们是否可以事先在本页面定义处理程序，服务端返回JS脚本，脚本的内容就是对处理程序的回调，服务返回的数据通过参数的形式传回：

handler('服务返回的数据');

然后通过动态向当前页面head节点添加<script src="服务地址"></script>节点的方式来“伪造”HTTP请求？

于是，可以编写这样一个简单的测试用例：

先写服务端，非常简单的一个服务，返回字符串"Hello World"，一般处理程序Service.ashx:

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
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
 
namespace JSONPDemo.Service
{
    /// <summary>
    /// Service2 的摘要说明
    /// </summary>
    public class Service2 : IHttpHandler
    {
 
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            context.Response.Write("handler('Hello World');");
        }
 
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

再写客户端，一个简单的静态Web页，index.html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript">
        // 跨域发送HTTP请求，从服务端获取字符串"Hello World"
        function getHello() {
            var script = document.createElement('script');
            script.setAttribute('src', 'http://localhost:8546/Service.ashx');
            document.querySelector("head").appendChild(script);
        }
        // 处理函数
        function handler(data) {
            alert(data);
            // our code here...
        }
    </script>
</head>
<body>
    <input type="button" value="发送跨域HTTP请求，获取Hello World" onclick="getHello()" />
</body>
</html>

前端的跨域解决方案

测试成功！

在这个测试例子中，我们使用一般处理程序编写了一个简单的返回Hello World的服务，然后使用动态创建<script></script>节点的方式实现了跨域HTTP请求。

由于<script>、<img>标签资源请求是异步的，所以我们就实现了一个跨域的异步HTTP请求。

但是这么做是不够的，一个页面可能会有多个HTTP请求，而上面这个示例的处理程序只有一个——handler。

不同的请求应该由不同的处理程序来处理，对上面的代码稍做修改，只需要给<script>标签的src属性中的URL添加一个参数来指定回调函数的名称就可以了：

服务端：

1
2
3
4
5
6
7
8
9
10
11
public void ProcessRequest(HttpContext context)
{
    context.Response.ContentType = "text/plain";
 
    // 前端指定的回调函数名称
    var callbackFuncName = context.Request.QueryString["callback"];
    var responseData = "Hello World";
    // 回调脚本，形如：handler('responseData');
    var scriptContent = string.Format("{0}('{1}');", callbackFuncName, responseData);
    context.Response.Write(scriptContent);
}

Web客户端：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>jsonp demo</title>
    <script type="text/javascript">
        // 跨域发送HTTP请求，从服务端获取字符串"Hello World"
        function getHello() {
            var script = document.createElement('script');
            script.setAttribute('src', 'http://localhost:8546/Service.ashx?callback=handler');//callback指定回调函数名称
            document.querySelector("head").appendChild(script);
        }
        // 处理函数
        function handler(data) {
            alert(data);
            // our code here...
        }
    </script>
 
</head>
<body>
    <input type="button" value="发送跨域HTTP请求，获取Hello World" onclick="getHello()" />
</body>
</html>

使用jQuery的JSONP跨域

jQuery的ajax方法对JSONP式跨域进行了封装，如果使用jQuery进行JSONP原理式的跨域HTTP请求，将会变得非常简单：

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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>jQuery jsonp demo</title>
    <script src="jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
        $.ajax({
            type: "get",
            async: false,
            url: "http://localhost:8546/Service.ashx",
            dataType: "jsonp",
            success: function (data) {
                alert(data);
            },
            error: function () {
                alert('fail');
            }
        });
    </script>
</head>
<body>
    使用jQuery一切将会变得非常简单。
</body>
</html>

只需要将dataType设置为"jsonp"就可以进行跨域请求了，一切就像发送非跨域请求那样简单。

jQuery为我们封装好了回调函数，一般情况下不需要我们单独去写，如果你不想在success中处理，想单独写处理函数，那么可以通过设置这2个参数来实现：

  • jsonp: "callback",//传递给服务端的回调函数名称参数，如果不设置此项，则默认是"callback"
  • jsonpCallback: "handler",//传递给服务端的回调函数名称，如果不设置此项，则默认是形如"jQuery111007837897759742043_1460657212499"的由jQuery自动生成的函数名称

 前端的跨域解决方案

必须要强调的是：

1.JSONP虽然看起来很像一般的ajax请求，但其原理不同，JSONP是对文章第一小节原理的封装，是通过<script>标签的动态加载来实现的跨域请求，而一般的ajax请求是通过XMLHttpRequest对象进行；

2.JSONP不是一种标准协议，其安全性和稳定性都不如 W3C 推荐的 CORS；

3.JSONP不支持POST请求，即使把请求类型设置为post，其本质上仍然是一个get请求。




相关文章：

猜你喜欢
相关资源
相似解决方案
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode