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

8 篇文章 0 订阅

前言

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

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

开始

step.1 测试项目准备

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

########## 1

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

########### 2

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

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

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

########### 3

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

######### 4

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

########## 5

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

########### 6

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。

######### 7

可以看到,跨域请求成功。但由于使用的是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是服务器端的设置,可以支持所有请求。

若有不足请指教。

  • 1
    点赞
  • 0
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:技术黑板 设计师:CSDN官方博客 返回首页
评论

打赏作者

Fanstorm丶

若有相助,可打赏一杯奶茶哦~

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值