使Web Api 支持跨域资源共享(CORS)-白红宇

使Web Api 支持跨域资源共享(CORS)

阅读量：5231 次

发布时间：2019-06-14

本文共 2293 字，大约阅读时间需要 7 分钟。

Reference:

Implementation：

1、创建两个项目，WebApi、WebApp，分别是MVC4 Empty、MVC4 Basic项目。

2、在WebApi项目中，添加一个Controller，template选择为Empty API controller

其代码为：

using System.Net.Http;using System.Web.Http;namespace WebService.Controllers{
        public class TestController : ApiController    {
            public HttpResponseMessage Get()        {
                return new HttpResponseMessage()            {
                    Content = new StringContent("GET: Test message")            };        }        public HttpResponseMessage Post()        {
                return new HttpResponseMessage()            {
                    Content = new StringContent("POST: Test message")            };        }        public HttpResponseMessage Put()        {
                return new HttpResponseMessage()            {
                    Content = new StringContent("PUT: Test message")            };        }    }}

3、运行WebApi项目，到目录，确保项目正常，如果项目正常，显示为：

4、给WebApp项目添加HomeController，以及Index视图，并给视图添加下面的代码：


        
         
         
     (Result)
    
@section scripts {}

5、这个时候我们右键WebApp项目——deBug——start new instance，然后点击try按钮，显示的会是Error，因为此时我们的WebApi项目并不支持跨域资源共享如图：

6、这时我们的准备就做好了，现在我们正式开始Implementation，在Nuget的console(打开方式：在VS中，View-other windows-packges manager console)中执行以下命令：

Install-Package Microsoft.AspNet.WebApi.Cors -pre -project WebService(api项目名)

7、在App_Start WebApiConfig中添加如下代码(原来的DefaultApi直接注释掉就行了)：

public static void Register(HttpConfiguration config)        {
                // New code            config.EnableCors();            config.Routes.MapHttpRoute(                name: "DefaultApi",                routeTemplate: "api/{controller}/{id}",                defaults: new {
     id = RouteParameter.Optional }            );        }

8、在TestController上添加一个特性EnableCors，如下：

namespace WebService.Controllers{
        [EnableCors(origins: "http://myclient.azurewebsites.net", headers: "*", methods: "*")]    public class TestController : ApiController    {
            // Controller methods not shown...    }}

9、这个时候我们就已经在WebApi中实现了CORS，你可以用步骤五种的方式，进行测试，得到的结果如下：

Possible ERROR：

在我们从Nuget安装了CORS以后可能会出现以下错误

在以下连接中可以找到解决方法：

在nuget中执行此命令可以解决此错误：Install-Package Microsoft.AspNet.WebApi -IncludePrerelease

转载于:https://www.cnblogs.com/key1309/p/3557979.html

你可能感兴趣的文章