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 ,如需转载请自行联系原作者
相关文章
|
4天前
|
前端开发 JavaScript 区块链
连接区块链节点的 JavaScript 库 web3.js
连接区块链节点的 JavaScript 库 web3.js
|
1天前
|
JavaScript Java 测试技术
基于springboot+vue.js的基于Web教师个人成果管理系统附带文章和源代码设计说明文档ppt
基于springboot+vue.js的基于Web教师个人成果管理系统附带文章和源代码设计说明文档ppt
12 7
|
1天前
|
JavaScript 前端开发
基于 Node.js 环境,使用内置 http 模块,创建 Web 服务程序
基于 Node.js 环境,使用内置 http 模块,创建 Web 服务程序
|
1天前
|
机器学习/深度学习 SQL 人工智能
Web LLM 实验:利用 LLM API 实现命令注入
Web LLM 实验:利用 LLM API 实现命令注入
|
1天前
|
SQL 机器学习/深度学习 人工智能
Web LLM 实验:利用 LLM API 实现 SQL 注入
Web LLM 实验:利用 LLM API 实现 SQL 注入
|
2天前
|
Web App开发 JavaScript Cloud Native
构建高效可扩展的RESTful API:Node.js与Express框架实践指南构建未来:云原生架构在企业数字化转型中的关键作用
【5月更文挑战第29天】 在数字化时代的驱动下,后端服务架构的稳定性与效率成为企业竞争力的关键。本文深入探讨了如何利用Node.js结合Express框架构建一个高效且可扩展的RESTful API。我们将从设计理念、核心模块、中间件应用以及性能优化等方面进行系统性阐述。通过实例引导读者理解RESTful接口设计的最佳实践,并展示如何应对大规模并发请求的挑战,确保系统的高可用性与安全性。
|
3天前
|
XML API 网络架构
Web Service和Web API理解和使用场景
**Web Service**是一种基于网络、使用SOAP协议和XML的数据封装的重服务,适用于跨平台、跨语言的企业系统集成,尤其在安全性和事务处理严格的场景,如银行系统。而**Web API**是轻量级的HTTP接口,常遵循REST原则,使用JSON格式,适合移动应用、开放平台和微服务间的通信,因其简洁高效。选择哪种取决于项目需求,Web Service适合复杂交互,Web API则流行于现代Web应用。
|
4天前
|
JavaScript 前端开发 数据可视化
Vue.js 与 ViewDesign:为企业级 Web 应用提供高效可靠的解决方案
Vue.js 是一款开源的渐进式 JavaScript 框架,擅长构建用户界面,适用于各种规模的应用。其特点包括渐进式设计、虚拟 DOM、响应式数据绑定和组件化。ViewDesign(前身为 iView)是基于 Vue.js 的企业级 UI 组件库,提供丰富的组件、遵循企业设计规范,并支持高度定制。两者结合,能提升开发效率、保证界面一致性、简化维护,且两者生态均得到良好支持。Vue.js 3 的支持使得开发更加现代和高效。
|
4天前
|
应用服务中间件 API nginx
使用Python和Flask构建RESTful Web API
使用Python和Flask构建RESTful Web API
14 0
|
4天前
|
JSON JavaScript 中间件
利用Node.js和Express构建RESTful API服务
利用Node.js和Express构建RESTful API服务
12 0