web api 初体验 解决js调用跨域问题

简介:

跨域界定

常见跨域:

同IP不同端口: http:IP:8001/api/user     http:IP:8002/api/user 

不同IP不同端口: http://172.28.20.100:8001/api/user    http://172.128.20.100:8002/api/user 

 

基本介绍

 web api出现的时间也不短了,一直没机会运用,很多公司还是用的wcf 和webservice.目前常用的web api场景是一个接口多平台调用,例如给安卓调用 给ios调用 给平板调用 主要为移动互联网提供服务,web api虽然可以脱离iis自寄宿 但目前大多还是托管在IIS上的。

调用方式

  1. 后台调用

  

      var httpClient = new HttpClient();
            var responseJson = httpClient.GetAsync("http://172.28.20.106:8002/api/products/3")
               .Result.Content.ReadAsStringAsync().Result;       
               Console.WriteLine(responseJson);
            //就这么简单的几行代码可以获得产品ID为3的对象 这是Get请求

目前使用最多的就是在手机端后台调用的方式来进行。但是在web网站端我们并不满足于后台调用 我们习惯前台用ajax调用

2.前台调用

复制代码
复制代码
 $.ajax({
            type: "GET",
            url: "http://172.28.20.106:8002/api/products/3",
            dataType: "xml",
            contentType: 'application/xml;charset=gb2312;'
        }).success(function (res) {
            console.log(res);
        }).error(function (xhr, status) {
            console.log(xhr);
        });
复制代码
复制代码

这样写绝对报错,会提示跨域调用错误

解决办法好几个 我采用cors的方式

步骤1:在api服务端添加引用 使用Nuget包联机安装

引用它是要用到 System.web.Http.Cors.dll这个文件

  控制跨域的访问权限有3种

 1.限定方法

 2.限定类(controller)

 3.全局 

 

我们直接使用简单粗暴的全局访问

  在app_start文件夹下面有个WebApiconfig.cs文件,在里面加上2句代码就 可以了

var cors = new EnableCorsAttribute("*", "*", "*");//第一个参数是指定的域(www.baidu.com 多个域可以以","分隔)
config.EnableCors(cors);

图片如下

简单的几个步骤就解决了跨域问题,之前难倒了我2天,就为了使用ajax调用webapi

分类:  ASP.NET, Web API
本文转自左正博客园博客,原文链接:http://www.cnblogs.com/soundcode/p/4864567.html ,如需转载请自行联系原作者
相关文章
|
1月前
|
JavaScript 前端开发 API
常用JavaScript 数组 API大全
常用JavaScript 数组 API大全
32 0
|
1月前
|
JSON API 数据库
解释如何在 Python 中实现 Web 服务(RESTful API)。
解释如何在 Python 中实现 Web 服务(RESTful API)。
23 0
|
1月前
|
API
egg.js 24.2写第一个api接口
egg.js 24.2写第一个api接口
71 0
|
8天前
|
JavaScript 前端开发 API
Vue.js:构建高效且灵活的Web应用的利器
Vue.js:构建高效且灵活的Web应用的利器
|
27天前
|
JavaScript 安全 前端开发
js开发:请解释什么是跨域请求(CORS),以及如何解决跨域问题。
CORS是一种W3C标准,用于解决浏览器同源策略导致的跨域数据访问限制。它通过服务器在HTTP响应头添加标志允许特定源进行跨域请求。简单请求无需预检,而预检请求(OPTIONS)用于询问服务器是否接受非简单请求。服务器端配置响应头如`Access-Control-Allow-Origin`等实现CORS策略,客户端JavaScript则正常发起请求。若配置不当,浏览器将阻止跨域访问,保障安全。
22 2
|
1月前
|
运维 JavaScript 前端开发
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
|
1月前
|
JavaScript 前端开发 API
JavaScript循环遍历常用的7种方法以及常用的数组 API
JavaScript循环遍历常用的7种方法以及常用的数组 API
34 0
|
1月前
|
XML JSON API
通过Flask框架创建灵活的、可扩展的Web Restful API服务
通过Flask框架创建灵活的、可扩展的Web Restful API服务
|
1月前
|
缓存 监控 API
Python Web框架FastAPI——一个比Flask和Tornada更高性能的API框架
Python Web框架FastAPI——一个比Flask和Tornada更高性能的API框架
57 0
|
1月前
|
Web App开发 JavaScript 前端开发
使用Node.js和Express构建RESTful API
使用Node.js和Express构建RESTful API
16 0