当前位置:首页 > Windows程序 > 正文

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

2021-03-26 Windows程序

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=http://www.mamicode.com/"viewport" content=http://www.mamicode.com/"width=device-width" /> <title>Index</title> <script src=http://www.mamicode.com/"~/Scripts/jquery-1.8.2.min.js"></script> <script type=http://www.mamicode.com/"text/javascript"> $(function() { $("#btnTest").click(function () { //var url = ":8013/api/values?name=HuaTao"; var url = ":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=http://www.mamicode.com/"button" id=http://www.mamicode.com/"btnTest" value=http://www.mamicode.com/"测试" /> </div> </body> </html>

View Code

这样访问是不行的,会提示如下错误:

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

    三、在服务端添加CORS配置

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

温馨提示: 本文由Jm博客推荐,转载请保留链接: https://www.jmwww.net/file/67793.html