.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中如果看到这句话就代表接口没跨域。

相关文章
|
2天前
|
JSON 前端开发 Java
一文读Web开发 之接口后端接口、类与前端请求、拦截器编写
一文读Web开发 之接口后端接口、类与前端请求、拦截器编写
18 6
|
17天前
|
SQL 缓存 测试技术
RESTful API设计的最佳实践:构建高效、可维护的Web服务接口
【6月更文挑战第11天】构建高效、可维护的RESTful API涉及多个最佳实践:遵循客户端-服务器架构、无状态性等REST原则;设计时考虑URL结构(动词+宾语,使用标准HTTP方法)、使用HTTP状态码、统一响应格式及错误处理;确保数据安全(HTTPS、认证授权、输入验证);实施版本控制;并提供详细文档和测试用例。这些实践能提升Web服务接口的性能和质量。
|
21天前
|
前端开发 Java BI
Spring3 Web MVC 集成Jasper Report生成PDF例子
Spring3 Web MVC 集成Jasper Report生成PDF例子
31 7
|
21天前
|
XML JavaScript 前端开发
基于SVG的web页面图形绘制API介绍
基于SVG的web页面图形绘制API介绍
24 4
|
21天前
|
JSON 前端开发 API
Apache HttpClient调用Spring3 MVC Restful Web API演示
Apache HttpClient调用Spring3 MVC Restful Web API演示
18 1
|
23小时前
|
弹性计算 算法 安全
视觉智能开放平台产品使用合集之在Web应用和WinForm应用程序中调用API时,出现Web端能够成功调用而WinForm端调用失败,是什么原因
视觉智能开放平台是指提供一系列基于视觉识别技术的API和服务的平台,这些服务通常包括图像识别、人脸识别、物体检测、文字识别、场景理解等。企业或开发者可以通过调用这些API,快速将视觉智能功能集成到自己的应用或服务中,而无需从零开始研发相关算法和技术。以下是一些常见的视觉智能开放平台产品及其应用场景的概览。
|
23天前
|
开发框架 .NET API
ASP.NET Core Web中使用AutoMapper进行对象映射
ASP.NET Core Web中使用AutoMapper进行对象映射
|
24天前
|
JSON 前端开发 Java
Spring Web MVC入门(3)——响应
Spring Web MVC入门(3)——响应
26 1
|
11天前
|
前端开发 JavaScript API
2024 Web 新特性 - 使用 Popover API 创建弹窗
Popover API简化了Web弹窗创建,标准化处理在所有主要浏览器中可用。它提供声明式创建弹出式菜单、提示和信息卡片,解决代码冗余和兼容性问题。弹窗自动定位在顶层,支持通过Esc键或点击外部关闭,且与触发元素语义关联。基础用法涉及`popover`和`popovertarget`属性。
20 0
|
24天前
|
存储 前端开发 Java
Spring Web MVC入门(2)——请求(下)
Spring Web MVC入门(2)——请求
22 0