.NET MVC第八章、Web Api 跨域接口

简介: .NET MVC第八章、Web Api 跨域接口

创建Web Api项目

在创建项目的时候需要选择Web Api,取消【为HTTPS】配置,如果选了的话操作的时候会比较麻烦。

image.png



WebApi项目启动

image.png


主页中的API选项

image.png

这里选择get请求的api/values

image.png



help下面的api/values对应结果

image.png



这个不是我们想要的,那么我们单独访问一下ip:port/api/values


http://localhost:1246/api/Values


image.png


返回的是XML格式数据


image.png


能看到默认返回的是XML格式的数据,这个是比较麻烦的,不是我们需要的数据格式,我们需要json数据,故而要进行一定的修改


ASP.NET MVC WEB API操作

由于WebApi的单独的一个项目,它的默认配置不太合适咱们使用,我们要对默认设置做一些调整。


1、修改返回数据格式

将下面的依据编码放置到App_start文件夹下的WebApiConfig里Register函数中。

//清除XML返回格式            
GlobalConfiguration.Configuration.Formatters.XmlFormatter.SupportedMediaTypes.Clear();

image.png


重新启动服务,访问http://localhost:1246/api/Values进行二次请求测试


image.png


发现数据已经从XML格式编程字符串格式,但是我们的方式


2、修改访问路径

由于我们要根据请求头来判断请求的具体函数,比较麻烦,所以我们在访问路由上加上一个【action】层级,让请求的写法符合我们的常识。


routeTemplate: "api/{controller}/{action}/{id}",


image.png

3、自定义API接口

依次选择【Web API】,【Web API 2控制器 - 空】,【添加】


image.png


输入控制器名称,一定要以Controller结束


image.png


可以看到继承的是ApiController


image.png


创建自定义接口函数

默认的请求头是get可以省略,如果是post就一定要写。


[HttpGet]
public Object GetInfo() {
    return new List<string>() { "苏洵", "苏轼", "苏辙", "苏秦", "苏代", "苏厉" };
}

image.png


启动访问

http://localhost:1246/api/Test/GetInfo


image.png


跨域配置

<httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="*" />
    <add name="Access-Control-Allow-Headers" value="*" />
    <add name="Access-Control-Allow-Methods" value="GET,POST,PUT,DELETE,OPTIONS" />
  </customHeaders>
</httpProtocol>


image.png

跨域访问测试

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
    $(document).ready(function () {
        $.ajax({
            url: "http://localhost:1246/api/Test/GetInfo", 
            type: "Get", 
            dataType: "json",
            success: function (data) {
                document.write(data);
            }
        });
    });
</script>

在路径上能看到绝对是本地访问,所以肯定会出现跨域问题,我们跨域后就可以直接访问这个接口。


image.png


如果接口没有进行跨域设置则会报错:


Access-Control-Allow-Origin

在F12中如果看到这句话就代表接口没跨域。

相关文章
|
8天前
|
JSON 前端开发 搜索推荐
关于商品详情 API 接口 JSON 格式返回数据解析的示例
本文介绍商品详情API接口返回的JSON数据解析。最外层为`product`对象,包含商品基本信息(如id、name、price)、分类信息(category)、图片(images)、属性(attributes)、用户评价(reviews)、库存(stock)和卖家信息(seller)。每个字段详细描述了商品的不同方面,帮助开发者准确提取和展示数据。具体结构和字段含义需结合实际业务需求和API文档理解。
|
2天前
|
JSON 搜索推荐 API
京东店铺所有商品接口系列(京东 API)
本文介绍如何使用Python调用京东API获取店铺商品信息。前期需搭建Python环境,安装`requests`库并熟悉`json`库的使用。接口采用POST请求,参数包括`app_key`、`method`、`timestamp`、`v`、`sign`和业务参数`360buy_param_json`。通过示例代码展示如何生成签名并发送请求。应用场景涵盖店铺管理、竞品分析、数据统计及商品推荐系统,帮助商家优化运营和提升竞争力。
34 23
|
1天前
|
JSON 缓存 API
解析电商商品详情API接口系列,json数据示例参考
电商商品详情API接口是电商平台的重要组成部分,提供了商品的详细信息,支持用户进行商品浏览和购买决策。通过合理的API设计和优化,可以提升系统性能和用户体验。希望本文的解析和示例能够为开发者提供参考,帮助构建高效、可靠的电商系统。
20 12
|
6天前
|
开发框架 数据可视化 .NET
.NET 中管理 Web API 文档的两种方式
.NET 中管理 Web API 文档的两种方式
30 14
|
22天前
|
运维 前端开发 C#
一套以用户体验出发的.NET8 Web开源框架
一套以用户体验出发的.NET8 Web开源框架
一套以用户体验出发的.NET8 Web开源框架
|
14天前
|
JSON API 数据格式
京东商品SKU价格接口(Jd.item_get)丨京东API接口指南
京东商品SKU价格接口(Jd.item_get)是京东开放平台提供的API,用于获取商品详细信息及价格。开发者需先注册账号、申请权限并获取密钥,随后通过HTTP请求调用API,传入商品ID等参数,返回JSON格式的商品信息,包括价格、原价等。接口支持GET/POST方式,适用于Python等语言的开发环境。
66 11
|
5天前
|
Web App开发 JSON 测试技术
API测试工具集合:让接口测试更简单高效
在当今软件开发领域,接口测试工具如Postman、Apifox、Swagger等成为确保API正确性、性能和可靠性的关键。Postman全球闻名但高级功能需付费,Apifox则集成了API文档、调试、Mock与自动化测试,简化工作流并提高团队协作效率,特别适合国内用户。Swagger自动生成文档,YApi开源但功能逐渐落后,Insomnia界面简洁却缺乏团队协作支持,Paw仅限Mac系统。综合来看,Apifox是国内用户的理想选择,提供中文界面和免费高效的功能。
|
1月前
|
人工智能 自然语言处理 API
Multimodal Live API:谷歌推出新的 AI 接口,支持多模态交互和低延迟实时互动
谷歌推出的Multimodal Live API是一个支持多模态交互、低延迟实时互动的AI接口,能够处理文本、音频和视频输入,提供自然流畅的对话体验,适用于多种应用场景。
90 3
Multimodal Live API:谷歌推出新的 AI 接口,支持多模态交互和低延迟实时互动
|
25天前
|
JSON 安全 API
淘宝商品详情API接口(item get pro接口概述)
淘宝商品详情API接口旨在帮助开发者获取淘宝商品的详细信息,包括商品标题、描述、价格、库存、销量、评价等。这些信息对于电商企业而言具有极高的价值,可用于商品信息展示、市场分析、价格比较等多种应用场景。
|
5天前
|
API Python
京东拍立淘图片搜索商品接口系列(京东 API)
简介:本文介绍了如何使用拍立淘图片搜索 API 在京东平台上查找相似商品。首先需安装 Python 库 `requests`,并通过内置库 `hashlib` 生成签名。API 支持通过图片 URL 或 Base64 编码的图片进行搜索,返回商品名称、价格等信息。示例代码展示了如何构建请求并处理响应。应用场景包括电商购物助手和竞品分析,帮助用户和商家提高购物效率和市场竞争力。