跨域资源共享CORS

Posted 2022-12-25 zerotensor

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了跨域资源共享CORS相关的知识，希望对你有一定的参考价值。

浏览器的同源策略：协议相同 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可以参考这里

以上是关于跨域资源共享CORS的主要内容，如果未能解决你的问题，请参考以下文章