跨域资源共享(CORS)解决跨域问题的实践记录

最新推荐文章于 2024-06-23 09:48:17 发布

积极向上的赵先生

最新推荐文章于 2024-06-23 09:48:17 发布

阅读量502

点赞数

文章标签： CORS ASP.NET 跨域

本文链接：https://blog.csdn.net/zhao277949522/article/details/101028535

版权

前因
这两天在看关于跨域的问题，其中有两种解决办法比较有意思，一个是JSONP，在我上一篇文章有转一篇写得比较详尽的朋友的博客；
另一个就是CORS，翻了好几篇，看来看去也没怎么说明白，比如同源策略到底是怎么实现的？是限制访问，还是限制返回？Access-Control-Allow-Origin到底是谁传给谁？所以我决定自己搭两个项目试一试；

正文
搭了两个项目，一个项目CORSTest1，只有前端（HTML）的项目，代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="../Scripts/jquery-3.3.1.min.js"></script>
</head>
<body>
    <button type="button" onclick="CorsTest()">CORS</button>
    <script>
    function CorsTest() {
        $.post("http://localhost:50434/Home/About", {}, function (d) {
            alert("成功");
        });
    }
    </script>
</body>
</html>

另一个项目CORSTest2只有后端，代码如下：

public class HomeController : Controller
    {
        public ActionResult About()
        {
            //Response.AddHeader("Access-Control-Allow-Origin", "http://localhost:50047");//这句最关键
            return Json("");
        }
    }

测试开始
1、CORSTest2项目注释Response.AddHeader…行代码，在CORSTest2的About()方法中打断点，CORSTest1点击按钮，结果如下，调用失败
在这里插入图片描述
但是，CORSTest2的断点进来了，明显的，同源策略是限制返回，而不是限制访问；

2、打开CORSTest2项目Response.AddHeader…行代码的注释，点击CORSTest1按钮
在这里插入图片描述
调用成功；说明只要返回带Access-Control-Allow-Origin头即可，请求可以不做任何处理；
3、将Response.AddHeader(“Access-Control-Allow-Origin”, “http://localhost:50047”);改为Response.AddHeader(“Access-Control-Allow-Origin”, “http://localhost:50046”)，点击CORSTest1的按钮，结果
在这里插入图片描述
与测试1同结果，故这个参数能限制接收的客户端；

总结
1、在非CORS的情况下，A域名的程序依然可以访问B域名的接口，只不过是浏览器限制了接收；
2、只需要被请求方在返回时为Response加上"Access-Control-Allow-Origin"头，并赋上正确的值，即可使请求方正常接收到结果，而请求方无需任何特殊操作；
3、“Access-Control-Allow-Origin"的取值为”*"时，所有的请求方都可以正常接收返回的结果；
"Access-Control-Allow-Origin"的取值为"域名(如http://127.0.0.1:8000)"时，只有对应的域名可以正常接收返回的结果；其他的域名无法正常接收；

积极向上的赵先生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
跨域资源共享(CORS)解决跨域问题的实践记录

前因这两天在看关于跨域的问题，其中有两种解决办法比较有意思，一个是JSONP，在我上一篇文章有转一篇写得比较详尽的朋友的博客；另一个就是CORS，翻了好几篇，看来看去也没怎么说明白，比如同源策略到底是怎么实现的？是限制访问，还是限制返回？Access-Control-Allow-Origin到底是谁传给谁？所以我决定自己搭两个项目试一试；正文搭了两个项目，一个项目CORSTest1，只有前...
复制链接

扫一扫