跨域资源共享CORS

2024-03-12 13:32:14

浏览器的同源策略：协议相同 and 域名相同 and 端口相同。当一个http请求不满足以上的同源策略时就是跨域请求。比如：

// 协议不同
http://s.taobao.com https://s.taobao.com
// 端口不同
http://www.taobao.com http://www.taobao.com:8090
// 域名不同
http://s.taobao.com http://www.taobao.com
//js中的fetch方法会引起跨域请求

注意：如果是通过href或者src请求下来的js文件、css文件、图片文件、视频文件都是不存在跨域请求的，只有通过AJAX请求请求数据时才会出现跨域问题。

解决浏览器跨域请求限制的方法：

方法一CORS：

这里只是简单的使用CORS

//在服务端的响应头中允许跨域请求
response.header("Access-Control-Allow-Origin","*")

方法二JSONP：

利用请求js文件文件不存在跨域请求的原理来实现的。

<!--
客户端html文件
-->
<html>
    <body>
        <h1>
            Hello!
        </h1>
        <script>
            function funcname(data){
                //data就是跨域请求的数据
                alert(data);
            }
        </script>
        <!--向http://localhost:91进行跨域请求-->
        <script src="http://localhost:91?callback=funcname"></script>
    </body>
</html>

//localhost:91服务器处理请求的代码
@RequestMapping("/")
@ResponseBody
public String deal(Request req){
    String f = req.getParam("callback");
    String data = "{code:200; msg:'world'}"; //json
    return f + '('+data')';
}

请示服务端返回的是客户端的一个函数的名字在调用某个数据的字符串格式，然后客户端请求到这个字符串后以js代码的格式进行执行，使得客户端的那个函数获得了服务端的json数据。

关于CORS可以参考这里

码农公寓

相关文章