利用CORS配置实现jQuery对WebApi及MVC的跨域访问

    js ajax操作中，默认不能进行跨域访问，我们可以通过CORS配置实现最简单的跨域访问。这种方式是在服务端进行跨域访问控制。

    一、编写服务端代码

    新建一个ASP.NET MVC/WebApi项目，在其中分别新建Api方法及MVC Action方法：

    WebApi方法如下：

    public class ValuesController : ApiController
    {
        // GET api/values
        public IEnumerable<string> Get()
        {
            return new string[] { "value1", "value2" };
        }

        // GET api/values/5
        public string Get(int id)
        {
            return "value";
        }

        // POST api/values
        public string Post([FromBody]MyModel value, string name)
        {
            TextHelper.WriteLineAppend(@"D:\我的日志.txt", string.Format("API 你写的名字是：{0}", name));
            return string.Format("API Hello, {0}", name);
        }

        // PUT api/values/5
        public void Put(int id, [FromBody]string value)
        {
        }

        // DELETE api/values/5
        public void Delete(int id)
        {
        }
    }
View Code

    MVC Action方法如下：

    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public string MyTest(string name1, MyModel m)
        {
            TextHelper.WriteLineAppend(@"D:\我的日志.txt", string.Format("MVC 你写的名字是：{0}", name1));
            return string.Format("MVC Hello, {0}", name1);
        }
    }
View Code

    二、编写客户端代码

    新建另外一个ASP.NET MVC项目，引用jQuery文件，在页面中POST方式访问Api或MVC方法。

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $("#btnTest").click(function () {
                //var url = "http://192.168.0.12:8013/api/values?name=HuaTao";
                var url = "http://192.168.0.12:8013/home/mytest?name1=HuaTao";
                $.post(url, {'No':3, Name:'WangGood', BirthDay:'2011-03-08 13:25:33'}, function(data) {
                    alert(data);
                });
            });
        });
    </script>
</head>
<body>
    <div>
        <input type="button" id="btnTest" value="测试" />
    </div>
</body>
</html>
View Code

    这样访问是不行的，会提示如下错误：

已 阻止跨源请求：同源策略禁止读取位于 http://192.168.0.12:8013/home/mytest?name1=%E5%8D%8E%E6%B6%9B 的远程资源。（原因：CORS 头缺少 'Access-Control-Allow-Origin'）。

 

    三、在服务端添加CORS配置

    为解决JS跨域问题，在服务端项目的配置文件中配置CORS：

  <system.webServer>
......    
<httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Headers" value="Content-Type" />
        <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
      </customHeaders>
    </httpProtocol>
  </system.webServer>
View Code

    如此即可进行JS跨域访问。

 

posted @ 2015-09-02 11:43  捡贝壳的小哥  阅读(1115)  评论(0)  编辑  收藏  举报