你的位置:首页 > ASP.net教程

[ASP.net教程]利用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跨域访问。