前端开发，解决跨域的几种方法

最新推荐文章于 2024-04-07 14:09:47 发布

还有14分钟九点半

最新推荐文章于 2024-04-07 14:09:47 发布

阅读量781

点赞数 1

文章标签：前端 http 网络

本文链接：https://blog.csdn.net/weixin_45324878/article/details/122162437

版权

前端开发，解决跨域的几种方法

跨域

同源策略

什么是同源策略，其作用是什么？

同源策略指的是：协议+域名+端口三者皆相同，可以视为在同一个域，否则为不同域。同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。
作用是一个用于隔离潜在恶意文件的重要安全机制。
所限制的跨域交互包括：

•Cookie、LocalStorage、IndexdDB 等存储内容；
•DOM 节点；
•Ajax 请求。

当协议（protocol），主机（host）和端口号（port）三者只要有一个不同则会出现跨域问题。

跨域解决办法

解决跨域的方式：
1.设置请求头（在项目测试中）
2.代理服务器
3.jsonp （ jsonp 只能支持get传参的方式）

设置请求头

		response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");
        //XXX为新增跨域字段
        response.setHeader("Access-Control-Allow-Headers", "Content-Type,Accept,X-Requested-With,XXX")
        设置Access-Control-Allow-Headers允许XXX字段在请求头中跨域请求

代理解决跨域原理：

通过一些方法设置代理，在请求发送(接收)之前加入中间层，将不同的域名转换成相同的就解决了跨域的问题，客户端发送请求时，不直接到服务器，而是先到代理的中间层，在这里将localhost：8088的这个域名装换为192.168.0.67:8061，再将请求发送到服务器，这样在服务器端收到的请求就是使用的192.168.0.67:8061域名，同理，当服务器返回数据的时候，也是先到代理的中间层，将192.168.0.67:8061转换成localhos：8088；这样在客户端也是在相同域名下访问的了。

jsonp

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>请求</button>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.js"></script>
    <script>
        $("button").click(()=>{
            $.ajax({
                url : "http://localhost:8081/getData",
                type : "get",
                success(data){
                    console.log(data)
                }
            })
        })
        
    </script>
</body>
</html>

还有14分钟九点半

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端开发，解决跨域的几种方法

前端开发，解决跨域的几种方法跨域同源策略什么是同源策略，其作用是什么？同源策略指的是：协议+域名+端口三者皆相同，可以视为在同一个域，否则为不同域。同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。作用是一个用于隔离潜在恶意文件的重要安全机制。所限制的跨域交互包括：•Cookie、LocalStorage、IndexdDB 等存储内容；•DOM 节点；•Ajax 请求。当协议（protocol），主机（host）和端口号（port）三者只要有一个不同则会出现跨域问
复制链接

扫一扫