您的位置: 首页  >  文章  >  跨域请求的实现方法 ASP.NET

跨域请求的实现方法 ASP.NET

分类: 文章 • 2024-10-28 13:08:10

前言

由于浏览器同源策略，凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。常用的跨域请求实现方法有两种，一是使用jsonp引入跨域内容，二是CORS。

本文将通过简单的代码示例，在ASP.NET中实现这两种跨域方法。

开始

step.1 测试项目准备

新建MVC项目,取名为MVCServer，作为跨域请求的目标网站：

跨域请求的实现方法 ASP.NET

在HomeController.cs中添加Test方法，作为跨域请求的目标方法。

跨域请求的实现方法 ASP.NET

F5运行项目，记录网址后关闭。

网址为： http://localhost:5941/

在同一个解决方案下，新建空Web项目，取名为EmptyClient ，用来发出Web请求：

跨域请求的实现方法 ASP.NET

将MVCServer中的Scripts/Jquery.min.js复制到EmptyClient中；在EmptyClient中新建Html页，引入jquery后用ajax请求MVCServer/HomeController/Test方法。

跨域请求的实现方法 ASP.NET

将Html页设置为启动页，将EmptyClient设置为启动项目，F5运行。F12查看console。

跨域请求的实现方法 ASP.NET

点击console的网址后，可以看到MVCServer/Home/Test是可以返回值的。但是因为跨域问题，AJax请求失败了。

跨域请求的实现方法 ASP.NET

step.2 jsonp方式跨域

JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通，而 HTML 的script 元素是一个例外。利用 script 元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 资料，而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON，而是任意的JavaScript，用 JavaScript 直译器执行而不是用 JSON 解析器解析。（来自百度百科）

下面我们继续用step.1的例子来说明jsonp。

将EmptyClient中的Html页代码改为如下代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <script src="jquery-3.3.1.min.js"></script>
    <script>
        function show(data) {
            console.log(data);
        }
    </script>
    <script src="http://localhost:5941/Home/Test?callBack=show"></script>
</body>
</html>

将MVCServer的Home/Test改为如下代码：

public string Test()
{
    string callBack = Request.QueryString["callBack"];
    string data = "{'a':'1'}";
    return callBack + "(" + data + ");";
}

右键MVCServer,点击生成，然后F5运行EmptyCLient。

跨域请求的实现方法 ASP.NET

可以看到，跨域请求成功。但由于使用的是script的src，所以仅能支持Get请求。

同时，Jquery也对该种方式进行了封装，只需要设置dataType:'jsonp’即可。示例代码如下：

$.ajax({
    type: "get",
    url: "http://localhost:5941/Home/Test",
    dataType: 'jsonp',
    success: function (resp) {
        console.log(resp)
    }
});

step.3 CORS跨域

CORS是一种允许当前域（domain）的资源（比如html/js/web service）被其他域（domain）的脚本请求访问的机制，通常由于同域安全策略（the same-origin security policy）浏览器会禁止这种跨域请求。 （来自百度百科）

该种跨域方式是在Response的头部添加Access-Control-Allow-Origin来实现的。下面我们继续用上面的代码示例来说明该种方式。

在MVCServer的HomeController里面添加下面代码：

[HttpPost]
public void Test2()
{
    Response.Clear();
    Response.Headers.Add("Access-Control-Allow-Origin", "*");
    Response.Write("{'a':'1'}");
}

将EmptyClient中html代码替换为下面代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <script src="jquery-3.3.1.min.js"></script>
    <script>
        $.post("http://localhost:5941/Home/Test2",function (resp) {
            console.log(resp);
        });
    </script>
</body>
</html>

右键MVCServer点击生成，然后F5运行EmptyClient. 可以看到跨域访问成功。

也可以通过配置config文件实现CORS。

打开MVCServer/web.config，找到system.webServer，在其中加入下面代码：

<httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="*"/>
  </customHeaders>
</httpProtocol>

这样做之后，Test2代码就算改为以下代码，也可以被跨域访问

[HttpPost]
public void Test2()
{
    Response.Clear();
    Response.Write("{'a':'1'}");
}

结束

本文简单的总结了跨域的两种方式：jsonp与CORS。 jsonp原理是利用src引入js，所有只能支持GET请求；而CORS是服务器端的设置，可以支持所有请求。

若有不足请指教。

相关推荐