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

相关文章
|
11月前
|
前端开发 Java API
Spring Cloud Gateway Server Web MVC报错“Unsupported transfer encoding: chunked”解决
本文解析了Spring Cloud Gateway中出现“Unsupported transfer encoding: chunked”错误的原因,指出该问题源于Feign依赖的HTTP客户端与服务端的`chunked`传输编码不兼容,并提供了具体的解决方案。通过规范Feign客户端接口的返回类型,可有效避免该异常,提升系统兼容性与稳定性。
797 0
|
监控 前端开发 API
一款基于 .NET MVC 框架开发、功能全面的MES系统
一款基于 .NET MVC 框架开发、功能全面的MES系统
745 5
|
开发框架 监控 .NET
C#进阶-ASP.NET WebForms调用ASMX的WebService接口
通过本文的介绍,希望您能深入理解并掌握ASP.NET WebForms中调用ASMX WebService接口的方法和技巧,并在实际项目中灵活运用这些技术,提高开发效率和应用性能。
1144 5
|
安全 API 开发者
Web 开发新风尚!Python RESTful API 设计与实现,让你的接口更懂开发者心!
在当前的Web开发中,Python因能构建高效简洁的RESTful API而备受青睐,大大提升了开发效率和用户体验。本文将介绍RESTful API的基本原则及其在Python中的实现方法。以Flask为例,演示了如何通过不同的HTTP方法(如GET、POST、PUT、DELETE)来创建、读取、更新和删除用户信息。此示例还包括了基本的路由设置及操作,为开发者提供了清晰的API交互指南。
339 6
|
开发框架 前端开发 JavaScript
ASP.NET MVC 教程
ASP.NET 是一个使用 HTML、CSS、JavaScript 和服务器脚本创建网页和网站的开发框架。
460 7
|
前端开发 测试技术 开发者
MVC模式在现代Web开发中有哪些优势和局限性?
MVC模式在现代Web开发中有哪些优势和局限性?
|
存储 开发框架 前端开发
ASP.NET MVC 迅速集成 SignalR
ASP.NET MVC 迅速集成 SignalR
383 0
|
开发框架 前端开发 .NET
ASP.NET CORE 3.1 MVC“指定的网络名不再可用\企图在不存在的网络连接上进行操作”的问题解决过程
ASP.NET CORE 3.1 MVC“指定的网络名不再可用\企图在不存在的网络连接上进行操作”的问题解决过程
916 0
|
开发框架 前端开发 .NET
ASP.NET MVC WebApi 接口返回 JOSN 日期格式化 date format
ASP.NET MVC WebApi 接口返回 JOSN 日期格式化 date format
384 0
|
开发框架 前端开发 安全
ASP.NET MVC 如何使用 Form Authentication?
ASP.NET MVC 如何使用 Form Authentication?
532 0