.NET Core2.0 +Vue2.0 三种跨域方式比较
cac55 2024-10-11 11:01 32 浏览 0 评论
一、为什么会出现跨域的问题
跨域问题由来已久，主要是来源于浏览器的”同源策略”。
? 何为同源？只有当协议、端口、和域名都相同的页面，则两个页面具有相同的源。只要网站的 协议名protocol、 主机host、 端口号port 这三个中的任意一个不同，网站间的数据请求与传输便构成了跨域调用，会受到同源策略的限制。 ? 同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。浏览器的同源策略，出于防范跨站脚本的攻击，禁止客户端脚本（如 JavaScript）对不同域的服务进行跨站调用（通常指使用XMLHttpRequest请求）。
所以说我们在web中，我们无法去获取跨域的请求，常见的就是无法通过js获取接口（这里要说下我的以前使用的经验：在同源系统下，前端js去调用后端接口，然后后端C#去调取跨域接口，这是我以前采用的办法，但是前后端分离，这个办法肯定就是不行了，因为那时候已经没有了前后端之分，是两个项目），所以我们只要合理使用同源策略，就可以达到跨域访问的目的。
二、如何达到跨域的目的——三种跨域方式 之JsonP
我自己建立了一个一个静态页面，用来模拟前端访问，具体如下步骤：
1、新建一个Html页面，使用Jquery来发送请求（文件在项目的WWW文件夹下，大家可以自己下载，或者Copy下边代码）。
一共三种跨域方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Blog.Core</title>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<style>
div {
margin: 10px;
word-wrap: break-word;
}
</style>
<script>
$(document).ready(function () {
$("#jsonp").click(function () {
$.getJSON("http://localhost:58427/api/Login/jsonp?callBack=?", function (data) {
$("#data-jsonp").html("数据: " + data.value);
});
});
$("#cors").click(function () {
$.get("http://localhost:58427/api/Login/Token", function (data, status) {
$("#status-cors").html("状态: " + status);
$("#data-cors").html("数据: " + data);
});
});
});
</script>
</head>
<body>
<h3>通过JsonP实现跨域请求</h3>
<button id="jsonp">发送一个 GET </button>
<div id="status-jsonp"></div>
<div id="data-jsonp"></div>
<hr />
<h3>添加请求头实现跨域</h3>
<hr />
<h3>通过CORS实现跨域请求，另需要在服务器段配置CORE</h3>
<button id="cors">发送一个 GET </button>
<div id="status-cors"></div>
<div id="data-cors"></div>
<hr />
</body>
</html>
注意：这里一定要注意jsonp的前端页面请求写法，要求很严谨
2、将这个页面部署到自己的IIS中（拷贝到文件里，直接在iis添加该文件，访问刚刚的Html文件目录就行）
3、在我们的项目 LoginController 中，设计Jsonp接口，Core调用的接口我们已经有了，就是之前获取Token的接口GetJWTStr
[HttpGet]
[Route("jsonp")]
public void Getjsonp(string callBack, long id = 1, string sub = "Admin", int expiresSliding = 30, int expiresAbsoulute = 30)
{
TokenModel tokenModel = new TokenModel();
tokenModel.Uid = id;
tokenModel.Sub = sub;
DateTime d1 = DateTime.Now;
DateTime d2 = d1.AddMinutes(expiresSliding);
DateTime d3 = d1.AddDays(expiresAbsoulute);
TimeSpan sliding = d2 - d1;
TimeSpan absoulute = d3 - d1;
string jwtStr = BlogCoreToken.IssueJWT(tokenModel, sliding, absoulute);
//重要，一定要这么写
string response = string.Format("\"value\":\"{0}\"", jwtStr);
string call = callBack + "({"+response+"})";
Response.WriteAsync(call);
}
注意：这里一定要注意jsonp的接口写法，要求很严谨
4、点击”通过JsonP实现跨域请求“按钮，发现已经有数据了，证明Jsonp跨域已经成功，你可以换成自己的域名试一试，但是Cors的还不行
三、如何达到跨域的目的——三种跨域方式 之添加请求头实现跨域
这里我没有写到代码里，是在一般处理程序里之前用到的
后端
public void ProcessRequest(HttpContext context)
{
//接收参数
string uName = context.Request["name"];
string data = "{\"name\":\"" + uName + "\",\"age\":\"18\"}";
//只需在服务端添加以下两句
context.Response.AddHeader("Access-Control-Allow-Origin", "*");
//跨域可以请求的方式
context.Response.AddHeader("Access-Control-Allow-Methods", "POST,GET");
context.Response.Write(data);
}
前端
function ashxRequest() {
$.post("http://localhost:5551/ashxRequest.ashx", { name: "halo" }, function (data) {
for (var i in data) {
alert(data[i]);
}
}, "json")
}
大家感兴趣可以自己实验下。有问题请留言
四、如何达到跨域的目的——三种跨域方式 之 高效CORS
1、前端的代码在jsonp的时候已经写好，请往上看第二节，后端接口也是Token接口
剩下的就是配置跨域了，很简单！
2、在ConfigureServices中添加
#region CORS
services.AddCors(c =>
{
//↓↓↓↓↓↓↓注意正式环境不要使用这种全开放的处理↓↓↓↓↓↓↓↓↓↓
c.AddPolicy("AllRequests", policy =>
{
policy
.AllowAnyOrigin()//允许任何源
.AllowAnyMethod()//允许任何方式
.AllowAnyHeader()//允许任何头
.AllowCredentials();//允许cookie
});
//↑↑↑↑↑↑↑注意正式环境不要使用这种全开放的处理↑↑↑↑↑↑↑↑↑↑
//一般采用这种方法
c.AddPolicy("LimitRequests", policy =>
{
policy
.WithOrigins("http://localhost:8020", "http://blog.core.xxx.com","")//支持多个域名端口
.WithMethods("GET", "POST", "PUT", "DELETE")//请求方法添加到策略
.WithHeaders("authorization");//标头添加到策略
});
});
#endregion
基本注释都有，大家都能看的懂，就这么简单！
3、在需要跨域的controller上，增加特性（本文因为在LoginController，所以在这个控制器里），注意名称要写对 LimitRequests
[Produces("application/json")]
[Route("api/Login")]
[EnableCors("LimitRequests")]//就是这里
public class LoginController : Controller
{
//....
}
4、好啦运行调试，一切正常
至此，跨域的问题已经完成辣
五、其他跨域方法补充
nginx是一个高性能的web服务器，常用作反向代理服务器。nginx作为反向代理服务器，就是把http请求转发到另一个或者一些服务器上。
通过把本地一个url前缀映射到要跨域访问的web服务器上，就可以实现跨域访问。
对于浏览器来说，访问的就是同源服务器上的一个url。而nginx通过检测url前缀，把http请求转发到后面真实的物理服务器。并通过rewrite命令把前缀再去掉。这样真实的服务器就可以正确处理请求，并且并不知道这个请求是来自代理服务器的。
简单说，nginx服务器欺骗了浏览器，让它认为这是同源调用，从而解决了浏览器的跨域问题。又通过重写url，欺骗了真实的服务器，让它以为这个http请求是直接来自与用户浏览器的。
这样，为了解决跨域问题，只需要动一下nginx配置文件即可。
六、结语
三种办法其实都能达到目的，但是优缺点也很明显
1、手动创建JSONP跨域
优点：无浏览器要求，可以在任何浏览器中使用此方式
缺点：格式要求很严格，只支持get请求方式，请求的后端出错不会有提示,造成不能处理异常
2、添加请求头实现跨域
优点：支持任意请求方式,并且后端出错会像非跨域那样有报错，可以对异常进行处理
缺点：兼容性不是很好，IE的话 <IE10 都不支持此方式
虽然CORS的方法有点儿类似请求头，但是封装，兼容性，灵活性都要好的很多，强烈推荐。
七、初探DTOs
请看以下实体类
//数据库实体类
public class Author
{
public string Name { get; set; }
}
public class Book
{
public string Title { get; set; }
public Author Author { get; set; }
}
//页面实体类
public class BookViewModel
{
public string Title { get; set; }
public string Author { get; set; }
}
//api调用
BookViewModel model = new BookViewModel
{
Title = book.Title,
Author = book.Author.Name
}
上面的例子相当的直观了，我们平时也是这么用的基本，但是问题也随之而来了，我们可以看到在上面的代码中，如果一旦在Book对象里添加了一个额外的字段，而后想在前台页面输出这个字段，那么就需要去在项目里找到每一处有这样BookViewModel转换字段的地方，这是非常繁琐的。另外，BookViewModel.Author是一个string类型的字段,但是Book.Author属性却是Author对象类型的，我们用的解决方法是通过Book.Auther对象来取得Author的Name属性值，然后再赋值给BookViewModel的Author属性，这样看起行的通，但是想一想，如果打算在以后的开发中把Name拆分成两个-FisrtName和LastName,我的天呐！我们得去把原来的ViewModel对象也拆分成对应的两个字段，然后在项目中找到所有的转换，然后替换。
那么有什么办法或者工具来帮助我们能够避免这样的情况发生呢？AutoMapper正是符合要求的一款插件。
只需一键操作，就能一劳永逸，解决所有问题，然后通过依赖注入，快速使用：
//AutoMapper自动映射 //Mapper.Initialize(cfg => cfg.CreateMap<BlogArticle, BlogViewModels>()); //BlogViewModels models = Mapper.Map<BlogArticle, BlogViewModels>(blogArticle); BlogViewModels models = IMapper.Map<BlogViewModels>(blogArticle);//就这一句话完全搞定所有转换
今天因为时间的关系，没有说到Automapper，明天再见吧~
相关推荐
- PDF转Excel后，转出的表格全是乱码是怎么回事?
-
日常工作中经常会用到将各种办公文档不同格式进行互转，比如将PDF转成Excel，这种转换非常简单，工具也很多，但是有时PDF文档是正常的，转出来的表格却全是乱码是怎么回事呢？在PDF转Excel时，你...
- Python CSV 模块通关秘籍:数据表格处理不求人
-
对话实录小白：（苦恼）我导出的CSV用Excel打开全是乱码！专家：（递上秘籍）（掏出魔法书）**编码问题！用utf-8-sigma保存！CSV格式初体验CSV后缀的文件是标准文件格式，可以通过文本编...
- ArcMap碎碎念(常见使用问题集锦)（arcgis细碎小班）
-
这几日，由于工作原因，频繁使用ArcMap，期间也碰到了些许问题，因而攒了这篇文章，以作记录。1.数据转换：mxd转mpk格式后缀为mxd的文件类型在ArcGIS的使用过程中较为常见，也即为常见的地图...
- Excel常用技能分享与探讨(4-经常遇到的问题点汇总②)
-
一、文件异常问题Excel文件损坏无法打开现象：提示“文件已损坏”“无法读取内容”或直接闪退。解决：使用【文件】→【打开】→选择文件→点击右下角【打开】下拉箭头→选择【打开并修复】。若失败，尝...
- 解决Excel“#”乱码的方法来了（excel表格嵌入图片别人打开是乱码怎么解决）
-
小编本人是个表格控，没有excel可能分分钟就会焦虑，刚用excel大概半年多的时间，随着数据传递的频繁和增多，发现了一个奇怪的问题。做好的表格保存后再打开会变成“###”还有时，会出现这样的日期这时...
- 如何修复损坏的 Excel 文件?3 个方法救回重要数据
-
有没有遇到这种情况：打开Excel提示“文件已损坏，无法打开”明明很重要的数据，却打不开了…别急！今天分享3个实用方法，帮你修复Excel文件，拯救重要数据！方法一：用Excel自带...
- 为什么你的 GIS 数据总是出现乱码?
-
你肯定遇到过这种情况：把GIS文件拖进BigemapPro，但为啥文字就变成了乱码？例如这样：遇到这种情况呢，你也别急，我来教你怎么处理。一、三调数据文件乱码我们通常拿到的三调数据文件是GDB格式的，...
- Excel表格数字乱码怎么办?推荐四种简单方法
-
我们经常利用Excel表格录入数据,在录入数据的时候我们经常会遇到这种情况:因为录入的数字的数位较多导致数字乱码。这种情况真的很影响我们的工作进程。那么Excel表格数字乱码该怎么办呢？推荐大家使用这...
- 使用Excel时经常遇到的问题，别担心，轻松告诉你解决方案
-
Excel打开CSV文件为乱码的解决方法！Excel中外部数据链接无法删除怎么办？Excel打开CSV文件为乱码的解决方法！从网页上导出数据文件存储为CSV格式的文件，使用记事本打开文字显示没有问题，...
- 解决数据恢复软件——恢复的excel文件乱码问题
-
恢复的excel文件出现乱码通常与原始文件损坏有关，为了解决数据恢复后excel乱码问题，建议使用数据恢复软件的深度恢复扫描，再次扫描需要恢复的excel文件所在磁盘，该扫描方式能对硬件设备进行碎片文...
- Excel表格中怎么删除乱码?一秒搞定
-
随着我们越来越多的使用Excel，我们会发现很多情况下Excel会返回一串乱码似的字符。这些其实并不是乱码。Excel执行公式运算时都会自动对单元格中输入的公式进行检查，当公式如果不能正确地计算时返回...
- EXCEL打开CSV等数据文件是乱码怎么办?
-
使用Data.olllo数据助手解决EXCEL打开CSV、TXT数据乱码的问题计算机存储的文件是有不同的编码方式，而有时候EXCEL打开CSV或TXT文件的时候，发现是乱码，这时候应该怎么办呢？工具：...
- Excel表格出现乱码，怎么办?只需要7步，就能完美解决问题
-
当打开表格时出现乱码，首先需要检查文件的编码格式，确认文件编码格式是否与本地编码格式一致。如果编码格式不一致，可以在打开表格时选择正确的编码格式。如果不确定编码格式，可以试着把文件保存为ANSI或者...
- 我的Excel打开后是一堆乱码，如何解决?
-
Excel文件内容变成乱码，可能由于文件编码、文件格式或Excel程序设置的问题导致。以下是一些有效的解决方案，可以帮助你解决Excel乱码问题1.确认文件编码是否正确如果文件是从外部导入的（例如C...
- Excel文件打开乱码问题解决方法详解
-
在日常办公或数据处理中，Excel文件是极为常用的工具。然而，有时当我们尝试打开一个Excel文件时，可能会遇到内容显示为乱码的情况，这不仅影响工作效率，还可能导致重要数据的丢失或损坏。本文将详细介绍...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- 如何绘制折线图 (52)
- javaabstract (48)
- 新浪微博头像 (53)
- grub4dos (66)
- s扫描器 (51)
- httpfile dll (48)
- ps实例教程 (55)
- taskmgr (51)
- s spline (61)
- vnc远程控制 (47)
- 数据丢失 (47)
- wbem (57)
- flac文件 (72)
- 网页制作基础教程 (53)
- 镜像文件刻录 (61)
- ug5 0软件免费下载 (78)
- debian下载 (53)
- ubuntu10 04 (60)
- web qq登录 (59)
- 笔记本变成无线路由 (52)
- flash player 11 4 (50)
- 右键菜单清理 (78)
- cuteftp 注册码 (57)
- ospf协议 (53)
- ms17 010 下载 (60)