在做Web开发中,常常会遇到跨域的问题,到目前为止,已经有非常多的跨域解决方案。
通过自己的研究以及在网上看了一些大神的博客,写了一个Demo
首先新建一个webapi的程序,如下图所示:
由于微软已经给我们搭建好了webapi的环境,所以我们不必去添加引用一些dll,直接开始写代码吧。
 
因为这只是做一个简单的Demo,并没有连接数据库。
第一步我们要在Models文件夹里添加一个实体类Employees,用来存放数据。
Employees.cs里的内容如下:
 using System;
using System.Collections.Generic;
using System.Linq;
using System.Web; namespace APIApplication.Models
{
public class Employees
{
public int? Id { get; set; }
public int? DepartmentId { get; set; }
public string Name { get; set; }
public string Job { get; set; }
public string Gender { get; set; }
public string PhoneNum { get; set; }
public string EmailAdderss { get; set; }
public string Address { get; set; }
}
}
添加完实体类之后我们的重头戏即将开始,那就是controller
接着我们在Controller文件夹下新建一个控制器,取名叫EmployeesController
注意在添加控制器的时候要选择空API控制器模板
如图所示:
在控制器里我们要添加如下代码:
在添加代码之前我们要添加引用:using APIApplication.Models;
 static List< Employees> emps;
static EmployeesController()
{
emps = new List< Employees>();
emps.Add( new Employees { Id = , DepartmentId = , Name = "张三", Gender = "男" , Job = "ASP.NET工程师" , PhoneNum = "1886 0922483", EmailAdderss = "zhangsan@123.com" , Address = "江苏省苏州市独墅湖大道228号" });
emps.Add( new Employees { Id = , DepartmentId = , Name = "李四", Gender = "女" , Job = "web前端工程师" , PhoneNum = "1886 0922483", EmailAdderss = "lisi@123.com" , Address = "江苏省苏州市独墅湖大道228号" });
}
这段代码的作用就是往实体Employees类里存储数据。这里我只添加了两条数据仅供大家参考。
 
接下来我们要实现CRUD功能:
 public IEnumerable <Employees > Get(int ? id = null )
{
return from employee in emps where employee.Id.Equals(id) || string.IsNullOrEmpty(Convert .ToString(id)) select employee;
}
public void Post( Employees employee)
{
employee.Id = ;
emps.Add(employee);
}
public void Put( Employees employee)
{
emps.Remove(emps.Where(e => e.Id == employee.Id).First());
emps.Add(employee);
}
public void Delete( int id)
{
emps.Remove(emps.Where(e => e.Id == id).FirstOrDefault());
}
在这里Get是获取员工传入参数id是返回的就是对应id的数据,为空就是全部数据
Post是添加数据
Put是修改数据Put比较特殊,它在执行修改的时候是根据修改数据的ID去查找这条数据,然后删除掉,在添加新的数据。
Delete当然就是删除了。
 
接下来是见证奇迹的时刻。我们点击运行,在浏览器里输入localhost:****/api/employees
然后我们会看到一个XML的文档
如下图所示:
到此我们完成了几个基本的WebApi的Get方法。
今天我们讲的是跨域调用WebApi
什么是跨域呢?
JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象。通常来说,跨域分为以下几类:
在跨域问题上,域仅仅是通过“URL的首部”来识别而不会去尝试判断相同的ip地址对应着两个域或两个域是否在同一个ip上。
想详细了解跨域的同学可以访问:http://twlidong.github.io/blog/2013/12/22/kua-yuan-zi-yuan-gong-xiang-cross-origin-resource-sharing-cors/
 
了解了跨域之后我们要开始继续往下看了。
web端调用api分为前端调用即(AJAX)后端调用即(.net)
我先从AJAX开始讲如何实现跨域
首先新建MVC项目,这里我就不截图了,相信大家都会的。
这里我们用Jquery的ajax()方法,mvc默认会帮我们引入jquery
我们只需要写如下代码就可以了:
 <script>
$(document).ready( function () {
$.ajax({
type: 'GET',
url: 'http://localhost:7974/api/employees/get',
dataType: 'JSON',
success: function (data) {
alert( "姓名:" + data[0].Name + " 性别:" + data[0].Gender + " 住址:" + data[0].Address);
}
});
})
这里的url是你的api的地址映射/api/employee/get是调用get方法获取所有数据
为了方便演示我就把获取的数据alert出来了。
按照我的步骤你们一定没有成功吧?
大家思考一下为什么会出现如下错误信息
在这里跟大家解释一下 Access-Control-Allow-Origin是HTML5中定义的一种服务器端返回Response header,用来解决资源(比如字体)的跨域权限问题。
当Access-Control-Allow-Origin后面跟URL 或 *,如果是 URL 则只会允许来自该 URL 的请求,* 则允许任何域的请求
例如:header('Access-Control-Allow-Origin:http://A.abc.com')||header('Access-Control-Allow-Origin:*')
意思是说只有当你请求的资源被允许跨域的时候才可以被访问。
那么我们该怎么设置Access-Control-Allow-Origin呢?
带着这个问题我么能继续我们的教程
为了解决跨域问题我们要自定义一个CrossSite的属性
在项目根目录新建一个类
内容如下:

 using System.Web;
using System.Web.Http.Filters;
using System.Web.Mvc; namespace APIApplication
{
public class CrossSiteAttribute : System.Web.Http.Filters.ActionFilterAttribute
{
private const string Origin = "Origin";
/// <summary>
/// Access-Control-Allow-Origin是HTML5中定义的一种服务器端返回Response header,用来解决资源(比如字体)的跨域权限问题。
/// </summary>
private const string AccessControlAllowOrigin = "Access-Control-Allow-Origin" ;
/// <summary>
/// originHeaderdefault的值可以使 URL 或 *,如果是 URL 则只会允许来自该 URL 的请求,* 则允许任何域的请求
/// </summary>
private const string originHeaderdefault = "http://192.168.13.7:8002" ;
/// <summary>
/// 该方法允许api支持跨域调用
/// </summary>
/// <param name="actionExecutedContext"> 初始化 System.Web.Http.Filters.HttpActionExecutedContext 类的新实例。</param>
public override void OnActionExecuted( HttpActionExecutedContext actionExecutedContext)
{
actionExecutedContext.Response.Headers.Add(AccessControlAllowOrigin, originHeaderdefault);
}
}
}
然后我们可以在EmployeesController中添加[CrossSite]属性
用法是这样的:
 [CrossSite]
public IEnumerable<Employees > Get(int ? id = null )
{
return from employee in emps where employee.Id.Equals(id) || string.IsNullOrEmpty(Convert .ToString(id)) select employee;
}
然后重新生成解决方案,运行后可以看到刚才的警告框的数据了。
 
前端的调用已经结束了,下面让我们看看后端是如何调用的吧。
在MVC项目里的Models里我们需要一个实体模型用来读取或设置数据
新建类命名为v_employees

 public class v_employees
{
public int? id { get; set; }
public int? departmentid { get; set; }
public string name { get; set; }
public string job { get; set; }
public string gender { get; set; }
public string phonenum { get; set; }
public string emailadderss { get; set; }
public string address { get; set; }
}
后端我采用的是HttpClient
具体用法如下:
         private HttpClient client = new HttpClient ();
private string url = "http://192.168.13.7:8001/api/employees/get" ; public async Task< ActionResult> Index()
{
ViewBag.Message = "Modify this template to jump-start your ASP.NET MVC application."; var data = await client.GetAsync(url);
var employees = data.Content.ReadAsAsync<IEnumerable <v_employees >>();
List< v_employees> emps = employees.Result.ToList();
ViewData[ "employees"] = emps;
return View();
}

然后在Index页面设置ViewData

在页面里就可以直接使用数据emps了

 @foreach ( var item in emps)
{
<ul >
<li >@ item.name</ li>
<li >@ item.gender</li >
<li >@ item.address</li >
</ul >
}

运行后的效果如下:

未完待续。

本教程会持续更新。

 
 
 
 
 

web端跨域调用webapi的更多相关文章

  1. 跨域调用webapi web端跨域调用webapi

    web端跨域调用webapi   在做Web开发中,常常会遇到跨域的问题,到目前为止,已经有非常多的跨域解决方案. 通过自己的研究以及在网上看了一些大神的博客,写了一个Demo 首先新建一个webap ...

  2. web端跨域调用webapi(转)

    在做Web开发中,常常会遇到跨域的问题,到目前为止,已经有非常多的跨域解决方案. 通过自己的研究以及在网上看了一些大神的博客,写了一个Demo 首先新建一个webapi的程序,如下图所示: 由于微软已 ...

  3. 跨域调用webapi

    web端跨域调用webapi   在做Web开发中,常常会遇到跨域的问题,到目前为止,已经有非常多的跨域解决方案. 通过自己的研究以及在网上看了一些大神的博客,写了一个Demo 首先新建一个webap ...

  4. web api 跨域请求,ajax跨域调用webapi

    1.跨域问题仅仅发生在Javascript发起AJAX调用,或者Silverlight发起服务调用时,其根本原因是因为浏览器对于这两种请求,所给予的权限是较低的,通常只允许调用本域中的资源,除非目标服 ...

  5. 实现jquery.ajax及原生的XMLHttpRequest跨域调用WCF服务的方法

    关于ajax跨域调用WCF服务的方法很多,经过我反复的代码测试,认为如下方法是最为简便的,当然也不能说别人的方法是错误的,下面就来上代码,WCF服务定义还是延用上次的,如: namespace Wcf ...

  6. 跨域学习笔记1--跨域调用webapi

    在做Web开发中,常常会遇到跨域的问题,到目前为止,已经有非常多的跨域解决方案. 通过自己的研究以及在网上看了一些大神的博客,写了一个Demo 首先新建一个webapi的程序,如下图所示: 由于微软已 ...

  7. AJAX跨域调用ASP.NET MVC或者WebAPI服务的解决方案

    问题描述 当跨域(cross domain)调用ASP.NET MVC或者ASP.NET Web API编写的服务时,会发生无法访问的情况. 重现方式 使用模板创建一个最简单的ASP.NET Web ...

  8. 关于AJAX跨域调用ASP.NET MVC或者WebAPI服务的问题及解决方案

      作者:陈希章 时间:2014-7-3 问题描述 当跨域(cross domain)调用ASP.NET MVC或者ASP.NET Web API编写的服务时,会发生无法访问的情况. 重现方式 使用模 ...

  9. AJAX跨域调用ASP.NET MVC或者WebAPI服务

    关于AJAX跨域调用ASP.NET MVC或者WebAPI服务的问题及解决方案 作者:陈希章 时间:2014-7-3 问题描述 当跨域(cross domain)调用ASP.NET MVC或者ASP. ...

随机推荐

  1. javascript 事件的一点感悟

    javascript 冒泡事件的理解一般是这样的: 比方页面上有一个BODY里面包含一个DIV,DIV中包含一个BUTTON.在BODY,DIV,BUTTON中都有一个ONCLICK事件,在BUTTO ...

  2. 地址转换协议ARP

    地址转换协议ARP 在以太网协议中规定,同一局域网中的一台主机要和另一台主机进行直接通信,必须要知道目标主机的MAC地址.而在TCP/IP协议中,网络层和传输层只关心目标主机的IP地址.这就导致在以太 ...

  3. loadrunner关联的感悟:

    首先用URL模式录制脚本: 切换到树模式下: 很容易查看到关联的位置,由此知道产生动态值得请求为nav.pl 但是在html中我们怎么查看关联值在哪里呢: 今天无意中意识到这个问题: 先看树视图脚本:

  4. 未能加载文件或程序集“XXXXXX”或它的某一个依赖项。试图加载格式不正确的程序。

    在本机WIN7机器上的WebService部署到Win2008R2上发现错误 “/”应用程序中的服务器错误. 未能加载文件或程序集“XXXXXX”或它的某一个依赖项.试图加载格式不正确的程序. 说明: ...

  5. Math.trunc

  6. 【HTTP】http协议一些重要的知识点

    一. HTTP状态码是用以表示网页服务器HTTP响应状态的3位数字代码.所有状态码的第一个数字代表了响应的五种状态之一.当用户试图通过HTTP或FTP协议访问一台运行主机上的内容时,Web服务器返回一 ...

  7. 内存泄漏(I)

    Block 解决内存泄漏 使用 weakSelf 进行解决 NSTimer 的内存泄漏与解决方案 内存泄漏

  8. Python 递归计算分数数列

    C语言的课后习题 求数列:2/1,3/2,5/3,8/5,13/8,21/13,...前50项的和 数列规律: 第二项的分母是[前一项分子] 第二项的分子是[前一项分子与分母的和] from frac ...

  9. Lottie 动画

    #### 三方框架之Lotti使用Lottie 的使用 1.添加 Gradle 依赖 dependencies { compile 'com.airbnb.android:lottie:1.5.3'} ...

  10. 配置python开发环境(Eclipse + pyDev)

    jdk-11.0.2eclipse 2018-12python 3.7.2 1. install jdk, 配置环境变量 新建JAVA_HOME 系统变量,C:\Program Files\Java\ ...