跨域调用webapi web端跨域调用webapi

时间:2022-02-17 07:20:12

1 static List< Employees> emps; 2 static EmployeesController() 3 { 4 emps = new List< Employees>(); 5 emps.Add( new Employees { Id = 1, DepartmentId = 1, Name = "张三", Gender = "男" , Job = "ASP.NET工程师" , PhoneNum = "1886 0922483", EmailAdderss = "zhangsan@123.com" , Address = "江苏省苏州市独墅湖大道228号" }); 6 emps.Add( new Employees { Id = 2, DepartmentId = 2, Name = "李四", Gender = "女" , Job = "web前端工程师" , PhoneNum = "1886 0922483", EmailAdderss = "lisi@123.com" , Address = "江苏省苏州市独墅湖大道228号" }); 7 }

这段代码的作用就是往实体Employees类里存储数据。这里我只添加了两条数据仅供大家参考。

 

接下来我们要实现CRUD功能:

1 public IEnumerable <Employees > Get(int ? id = null ) 2 { 3 return from employee in emps where employee.Id.Equals(id) || string.IsNullOrEmpty(Convert .ToString(id)) select employee; 4 } 5 public void Post( Employees employee) 6 { 7 employee.Id = 3; 8 emps.Add(employee); 9 } 10 public void Put( Employees employee) 11 { 12 emps.Remove(emps.Where(e => e.Id == employee.Id).First()); 13 emps.Add(employee); 14 } 15 public void Delete( int id) 16 { 17 emps.Remove(emps.Where(e => e.Id == id).FirstOrDefault()); 18 }

在这里Get是获取员工传入参数id是返回的就是对应id的数据,为空就是全部数据

Post是添加数据

Put是修改数据Put比较特殊,它在执行修改的时候是根据修改数据的ID去查找这条数据,然后删除掉,在添加新的数据。

Delete当然就是删除了。

 

接下来是见证奇迹的时刻。我们点击运行,在浏览器里输入localhost:****/api/employees

然后我们会看到一个XML的文档

如下图所示:

到此我们完成了几个基本的WebApi的Get方法。

今天我们讲的是跨域调用WebApi

什么是跨域呢?

JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象。通常来说,跨域分为以下几类:

在跨域问题上,域仅仅是通过“URL的首部”来识别而不会去尝试判断相同的ip地址对应着两个域或两个域是否在同一个ip上。

想详细了解跨域的同学可以访问:

 

了解了跨域之后我们要开始继续往下看了。

web端调用api分为前端调用即(AJAX)后端调用即(.net)

我先从AJAX开始讲如何实现跨域

首先新建MVC项目,这里我就不截图了,相信大家都会的。

这里我们用Jquery的ajax()方法,mvc默认会帮我们引入jquery

我们只需要写如下代码就可以了:

1 <script> 2 $(document).ready( function () { 3 $.ajax({ 4 type: ‘GET‘, 5 url: ‘:7974/api/employees/get‘, 6 dataType: ‘JSON‘, 7 success: function (data) { 8 alert( "姓名:" + data[0].Name + " 性别:" + data[0].Gender + " 住址:" + data[0].Address); 9 } 10 }); 11 })

这里的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:‘)||header(‘Access-Control-Allow-Origin:*‘)

意思是说只有当你请求的资源被允许跨域的时候才可以被访问。

那么我们该怎么设置Access-Control-Allow-Origin呢?

带着这个问题我么能继续我们的教程

为了解决跨域问题我们要自定义一个CrossSite的属性

在项目根目录新建一个类

内容如下: