后端

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

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

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

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

  3. API所在项目使用NuGet安装Microsoft.AspNet.WebApi.Cors，打开vs的NuGet控制台，执行命令Install-Package Microsoft.AspNet.WebApi.Cors
  4. 修改WebApiConfig.cs文件的配置：在WebApiConfig类中添加方法EnableCrossSiteRequests，同时不要忘了将System.Web.Http.Cors命名空间引入。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
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节点下添加：

    1
    2
    3
    4
    5
    6
    7
    <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>

  2. 重新编译调试项目，出现错误安全透明方法“System.Web.Http.GlobalConfiguration.get_Configuration()”尝试访问安全关键类型“System.Web.Http.HttpConfiguration”失败。

  3. 错误原因：system.web.http.webhost的版本低引起，system.web.http.webhost的版本是4.0.0.0，需要安装一个高版本的web api。
  4. 使用NuGet安装Microsoft ASP.NET Web API 2.2：
    Install-Package Microsoft.AspNet.WebApi -Version 5.2.4
  5. 重新生成解决方案，再次调试成功。
  6. 测试允许跨域访问是否成功

  7. 编写HTML文件：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    <!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>

  8. 成功访问

推荐文章