ASP.NET WebAPI允许跨域访问配置踩坑记

深藏阁楼爱情的钟 2022-12-22 09:57 179阅读 0赞

#### 没有设置服务端允许跨域访问之前 ####

1.  API服务器地址http://localhost:17693/api/food
2.  在本地新建一个HTML，采用jQuery Ajax获取跨域获取数据，结果如下：

[![239d7942891f8ef3dbb115bfd7d502a0.png][]][239d7942891f8ef3dbb115bfd7d502a0.png 1]

#### 配置ASP.NET Web API允许跨域访问 ####

1.  API所在项目使用NuGet安装Microsoft.AspNet.WebApi.Cors，打开vs的NuGet控制台，执行命令`Install-Package Microsoft.AspNet.WebApi.Cors`
2.  修改WebApiConfig.cs文件的配置：在WebApiConfig类中添加方法EnableCrossSiteRequests，同时不要忘了将System.Web.Http.Cors命名空间引入。

using System;
    	using System.Collections.Generic;
    	using System.Linq;
    	using System.Web.Http;
    	using System.Web.Http.Cors;
    
    	namespace WebAPI_Swagger
    	{
    		public static class WebApiConfig
    		{
    			public static void Register(HttpConfiguration config)
    			{
    
    				config.Routes.MapHttpRoute(
    					name: "DefaultApi",
    					routeTemplate: "api/{controller}/{id}",
    					defaults: new { id = RouteParameter.Optional }
    				);
    			}
    			private static void EnableCrossSiteRequests(HttpConfiguration config)
    			{
    				//对所有的请求来源没有任何限制
    				var cors = new EnableCorsAttribute(
    				 origins: "*",
    				 headers: "*",
    				 methods: "*"
    				 );
    				config.EnableCors(cors);
    			}
    		}
    	}

1.  在项目的Web.config文件中的system.webServer节点下添加：
    
        <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" />
        		</customHeaders>
        	</httpProtocol>

4. 重新编译调试项目，出现错误`安全透明方法“System.Web.Http.GlobalConfiguration.get_Configuration()”尝试访问安全关键类型“System.Web.Http.HttpConfiguration”失败。`
    [![](https://img-blog.csdnimg.cn/img_convert/af06df162dc54e7e56b16f4ea504db94.png)](https://images.fengjiaheng.top/images/20180429/02.png)
    5. 错误原因：system.web.http.webhost的版本低引起，system.web.http.webhost的版本是4.0.0.0，需要安装一个高版本的web api。
    6. 使用NuGet安装`Microsoft ASP.NET Web API 2.2`：
    `Install-Package Microsoft.AspNet.WebApi -Version 5.2.4`
    7. 重新生成解决方案，再次调试成功。
    8. 测试允许跨域访问是否成功
    9. 编写HTML文件：
    
    	```C#
    		<!DOCTYPE html>
    		<html lang="en">
    		<head>
    			<meta charset="UTF-8">
    			<meta name="viewport" content="width=device-width, initial-scale=1.0">
    			<meta http-equiv="X-UA-Compatible" content="ie=edge">
    			<title>Document</title>
    			<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    			<script>
    				$.ajax({
    					url: "http://localhost:17693/api/food",//Food就是控制器的名字
    					type: "Get",
    					success: function (obj)
    					{
    						var str = "";
    						str += "<table><tr><td>食物名：</td></tr>";
    						for (var i = 0; i < obj.length; i++)
    						{
    							str += "<tr><td>"+obj[i].FName+"</td></tr>";
    						}
    						str += "</table>";
    						$("#DivFood").html(str);
    					}
    				})
    			</script>
    		</head>
    		<body>
    			<div>
    				<div id="DivFood"></div>
    			</div>
    		</body>
    		</html>
    	```
    10. 成功访问
    ![](https://img-blog.csdnimg.cn/img_convert/e7dd736cf6a2bc8121a9ba7206fd4699.png)](https://images.fengjiaheng.top/images/20180429/03.png)

[239d7942891f8ef3dbb115bfd7d502a0.png]: /images/20221120/97f04171f3004c7aa619dbddcfd43b4c.png
[239d7942891f8ef3dbb115bfd7d502a0.png 1]: https://images.fengjiaheng.top/images/20180429/01.png