大家好，如果您还对.NET Core2.0 +Vue2.0 三种跨域方法对比不太了解，没有关系，今天就由本站为大家分享.NET Core2.0 +Vue2.0 三种跨域方法对比的知识，包括的问题都会给大家分析到，还望可以解决大家的问题，下面我们就开始吧！

二、如何达到跨域的目的——三种跨域方式之JsonP

我一一创建静态页面来模拟前端访问。具体步骤如下：

1、新建一个Html页面，使用Jquery发送请求（文件在项目的WWW文件夹下，可以自己下载，或者复制下面的代码）。

跨域方法一共有三种

!DOCTYPE htmlhtmlhead meta charset=’utf-8′ titleBlog.Core/标题脚本src=’https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js’/script 样式div { margin: 10px; word-wrap: 中断-word； } /style 脚本$(document).ready(function () { $(‘#jsonp’).click(function () { $.getJSON(‘http://localhost:58427/api/Login/jsonp?callBack=?’, function (data ) { $(‘#data-jsonp’).html(‘data: ‘ + data.value); }); $(‘#cors’).click(function () { $.get(‘http://localhost:58427/api/登录/令牌’, function (data, status) { $(‘#status-cors’).html(‘status : ‘ + status); $(‘#data-cors’).html( ‘数据： ‘ + 数据); }); /script/headbody h3 通过JsonP 实现跨域请求/h3 button id=’jsonp’ 发送GET /button div id=’status-jsonp’/div div id=’data-jsonp’/div hr/h3 添加请求header实现跨域/h3 hr/h3通过CORS实现跨域请求，还需要在server段配置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;日期时间d1=日期时间.Now; DateTime d2=d1.AddMinutes(expiresSliding);日期时间d3=d1.AddDays(expiresAbsoulute);滑动时间跨度=d2 – d1;绝对时间跨度=d3 – d1；字符串jwtStr=BlogCoreToken.IssueJWT（tokenModel，滑动，绝对）; //重要，必须这样写string response=string.Format(‘\’value\’:\'{0}\”, jwtStr);字符串调用=callBack + ‘({‘+response+’})’; Response.WriteAsync(调用); }注意：这里一定要注意jsonp接口的写法，要求非常严格

4、点击“通过JsonP跨域请求”按钮，发现已经有数据了，证明Jsonp跨域已经成功。你可以用自己的域名试试，但是Cors的还不行。

三、如何达到跨域的目的——三种跨域方式之添加请求头实现跨域

这里我没有把它写到代码中，之前在通用处理程序中使用过。

后端

public void ProcessRequest(HttpContext context) { //接收参数字符串uName=context.Request[‘name’]; string data='{\’姓名\’:\” + uName + ‘\’,\’年龄\’:\’18\’}’; //在服务端添加下面两句即可context.Response.AddHeader(‘Access-Control-Allow-Origin’, ‘*’); //如何进行跨域请求context .Response.AddHeader(‘Access-Control-Allow-Methods’, ‘POST,GET’);上下文.Response.Write(数据); }前端

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’) ;//向策略添加header }) }); #endregion 有每个人都能理解的基本注释，就这么简单！

4. OK，运行调试，一切正常。

至此，跨域问题已经完成。

五、其他跨域方法补充

通过将本地URL前缀映射到需要跨域访问的Web服务器，可以实现跨域访问。

简单来说，nginx服务器欺骗浏览器认为是同源调用，从而解决浏览器的跨域问题。通过重写URL，它欺骗真实服务器，使其认为http请求直接来自用户的浏览器。

这样，要解决跨域问题，只需要更改nginx配置文件即可。

六、结语

三种方法其实都可以达到目的，但是优缺点也很明显。

1.手动创建JSONP跨域

优点：无浏览器要求，该方法在任何浏览器都可以使用

缺点：格式要求非常严格，仅支持get请求方式。当请求的后端发生错误时不会有提示，导致无法处理异常。

2.添加请求头实现跨域

优点：支持任意请求方式，后端错误会像非跨域错误一样报错，并且可以处理异常

缺点：兼容性不是很好。对于IE，IE10不支持该方法。

CORS方式虽然和请求头有些类似，但是封装性、兼容性、灵活性都要好很多。强烈推荐。

七、初探DTOs

请参阅以下实体类

//数据库实体类public class Author{ public string Name { get;放； }}公共类书籍{公共字符串标题{获取；放； } 公共作者作者{ get;放； }}//页面实体类public class BookViewModel { public string Title { get;放； } 公共字符串作者{ get;放； }}//api调用BookViewModel model=new BookViewModel{ Title=book.Title, Author=book.Author.Name} 上面的例子是相当直观的，我们通常这样使用，但是问题就出现了。我们在上面的代码中可以看到，如果在Book对象中额外添加了一个字段，然后我们想要在首页输出这个字段，那么就需要找到项目中每一个有这样一个BookViewModel转换字段的地方，这是非常乏味的。另外，BookViewModel.Author是一个字符串类型字段，但Book.Author属性是Author对象类型。我们采用的解决方案是通过Book.Auther对象获取Author的Name属性值，然后赋值给BookViewModel的Author。属性，这个貌似可行，但是想一想，如果你打算在以后的开发中把Name拆成两个——FisrtName和LastName，天啊！我们要把原来的ViewModel对象拆分成对应的两个字段，然后找到项目中所有的转换，然后替换掉。

那么有没有什么方法或者工具可以帮助我们避免这种情况呢？ AutoMapper是一个满足要求的插件。

只需一键即可一劳永逸解决所有问题，然后通过依赖注入即可快速使用：