我们现在创建一个其他的web项目，这个项目可以是一个普通的html项目都是可以的。不是动态网站。然后再这个web项目里面我们添加一个html的页面，在这个页面里面，我们使用ajax的方式请求我们的webapi的接口。这里可能会遇到一个跨域访问的问题。需要我们修改webapi项目，增加取消跨站访问的问题。
我们在web网站中加入一个html文件，然后添加下面的代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script src="Scripts/jquery-1.10.2.js"></script>
</head>
<body>
<script>
$.get("http://localhost:23557/api/values/1",
function (data) {
alert("返回值：" + data);
});
</script>
</body>
</html>Code language: HTML, XML (xml)然后我们碰到一个跨站的问题。我们需要在webapi项目中安装一个扩展包。是微软官方的。
打开nuget管理器
搜索这个关键字Microsoft.AspNet.WebApi.Cors
然后修改WebApiConfig这个类 加入取消跨域的问题
public static class WebApiConfig
{
public static void Register(HttpConfiguration config)
{
// Web API 配置和服务
//跨域配置
config.EnableCors(new EnableCorsAttribute("*", "*", "*"));
// Web API 路由
config.MapHttpAttributeRoutes();
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{id}",
defaults: new { id = RouteParameter.Optional }
);
}
}Code language: PHP (php)
Previous: 前后端分离的理解和WEB API使用
Next: 前后端分离的认证问题Token的理解