跨域问题

最新推荐文章于 2023-08-01 11:41:30 发布
最新推荐文章于 2023-08-01 11:41:30 发布
阅读量275 收藏
点赞数
分类专栏： 网络 文章标签： 网络
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36930483/article/details/108873662
版权

同源策略

很多人对跨域有一种误解，以为这是前端的事，和后端没关系，其实不是这样的，说到跨域，就不得不说说浏览器的同源策略。

同源策略是由Netscape提出的一个著名的安全策略，它是浏览器最核心也最基本的安全功能，现在所有支持JavaScript的浏览器都会使用这个策略。所谓同源是指协议、域名以及端口要相同。同源策略是基于安全方面的考虑提出来的，这个策略本身没问题，但是我们在实际开发中，由于各种原因又经常有跨域的需求，传统的跨域方案是JSONP，JSONP虽然能解决跨域但是有一个很大的局限性，那就是只支持GET请求，不支持其他类型的请求，而今天我们说的CORS（跨域源资源共享）（CORS，Cross-origin resource sharing）是一个W3C标准，它是一份浏览器技术的规范，提供了Web服务从不同网域传来沙盒脚本的方法，以避开浏览器的同源策略，这是JSONP模式的现代版。

在Spring框架中，对于CORS也提供了相应的解决方案，今天我们就来看看SpringBoot中如何实现CORS。

  • 同源策略是一种约定，它是浏览器最核心也会是最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。它约定请求的url地址，必须与浏览器的url地址处于同域上，也就是域名，端口，协议都相同。如果不同，就会报错：

  • 实际上的结果是，请求已经被发送过去了，目标服务器也对请求做出了响应，只是浏览器对非同源请求的返回结果做了拦截。

一些内嵌资源不受限制

如：

  • <script src="..."></script> 标签嵌入跨域脚本。语法错误信息只能在同源脚本中捕捉到。

  • <link rel="stylesheet" href="..."> 标签嵌入CSS。

  • <img> 嵌入图片。

  • <video> 和 <audio> 嵌入多媒体资源。

  • <object>, <embed> 和 <applet>的插件。

  • @font-face 引入的字体。一些浏览器允许跨域字体（ cross-origin fonts），一些需要同源字体（same-origin fonts）。

  • <frame> 和 <iframe>载入的任何资源。站点可以使用X-Frame-Options消息头来阻止这种形式的跨域交互。

限制范围

非同源的网站，主要有3种行为受到限制

  1. 无法共享 cookie, localStorage, indexDB

  2. 无法操作彼此的 DOM 元素

  3. 无法发送 Ajax 请求

jsonp

jsonp 全称是JSON with Padding,是为了解决跨域请求资源而产生的解决方案,是一种依靠开发人员创造出的一种非官方跨域数据交互协议。

jsonp的原理就是借助HTML中的<script>标签可以跨域引入资源。所以动态创建一个<srcipt>标签，src为目的接口 + get数据包 + 处理数据的函数名。后台收到GET请求后解析并返回函数名(数据)给前端，前端<script>标签动态执行处理函数。

缺陷: 仅get请求支持

  • 基于script标签实现的跨域

    <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
 
<script type="text/javascript">
    var messagetow = function(data){
        alert(data);
    };
    var url = "http://192.168.31.137/train/test/jsonpthree?callback=messagetow";
    var script = document.createElement('script');
    script.setAttribute('src', url);
    document.getElementsByTagName('body')[0].appendChild(script);
</script>
</head>
<body>
</body>
</html>

  • 基于jquery跨域

    $.ajax({
     type : 'get',
     url:'http://192.168.31.137/train/test/testjsonp',
     data : {
        name : name,
        sex : sex,
        address : address,
        looks : looks,
    },
    cache :false,
    jsonp: "callback",
    jsonpCallback:"success",
    dataType : 'jsonp',
    success:function(data){
        alert(data);
    },
    error:function(data){
        alert('error');
    }       
});

跨域资源共享（CORS）

CORS（Cross-Origin Resource Sharing）跨域资源共享，定义了必须在访问跨域资源时，浏览器与服务器应该如何沟通。CORS背后的基本思想就是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功还是失败。

<script type="text/javascript">
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "/trigkit4",true);
    xhr.send();
</script>

以上的trigkit4是相对路径，如果我们要使用CORS，相关Ajax代码可能如下所示：

<script type="text/javascript">
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "http://segmentfault.com/u/trigkit4/",true);
    xhr.send();
</script>

代码与之前的区别就在于相对路径换成了其他域的绝对路径，也就是你要跨域访问的接口地址。

服务器端对于CORS的支持，主要就是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置，就可以允许Ajax进行跨域的访问。

  • CORS(Cross-origin resource sharing，跨域资源共享)是一个 W3C 标准，定义了在必须访问跨域资源时，浏览器与服务器应该如何沟通(需要客户端和服务端协同处理)。

  • CORS有两种请求，简单请求和非简单请求。

简单请求

  • 什么是简单请求？

    只要同时满足以下两大条件，就属于简单请求。
​
（1）请求方法是以下三种方法之一：
    - HEAD
    - GET
    - POST
（2）HTTP的头信息不超出以下几种字段：
    - Accept
    - Accept-Language
    - Content-Language
    - Last-Event-ID
    - Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

  • 简单请求实现cors

    1.前端不需要进行特殊的操作
2.后端需要加入请求头Access-Control-Allow-Origin，代码如下：
    def get_time(request):
        if request.method == 'GET':
            ntime = time.strftime('%Y-%m-%d %X')
            obj = HttpResponse(ntime)
            obj['Access-Control-Allow-Origin'] = 'http://127.0.0.1:8001'
            return obj

复杂请求

  • 两次请求，在发送数据之前会先发第一次请求做预检，只有预检通过后在发一次请求作为数据传输。

    - 请求方式：OPTIONS
- “预检”其实做检查，检查如果通过则允许传输数据，检查不通过则不再发送真正想要发送的消息
- 如何“预检”
    => Access-Control-Allow-Origin（必含）
       设置为'*',允许所有域名访问
       一般设置为指定域名，如：'Access-Control-Allow-Origin:http://192.168.12.87'
    => 如果复杂请求是PUT等请求，则服务端需要设置允许某请求，否则“预检”不通过
        Access-Control-Request-Method
    => 如果复杂请求设置了请求头，则服务端需要设置允许某请求头，否则“预检”不通过
        Access-Control-Request-Headers

  • 复杂请求实现

    前端

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<button id="a" class="btn btn-success">go</button>
<script>
    $("#a").click(function () {
        $.ajax({
            url:'http://127.0.0.1:8000/money/',
            type:'post',
            contentType:'application/json',
            data:{"name":"yjh"},
            success:function (data) {
                alert(data)
            }
            }
        )
    })
</script>
</body>
</html>

    后台

    from django.http import QueryDict
def get_money(request,response):
    if request.method == 'OPTIONS':
        response['Access-Control-Allow-Origin'] = '*' # 允许所有域名访问，一般会设置成指定的域名
        response['Access-Control-Allow-Headers'] = 'Content-Type'  # 复杂请求添加的头信息
    response['Access-Control-Allow-Origin'] = 'http://127.0.0.1:8001'
    return response

如何使用

  • 客户端只需按规范设置请求头。

  • 服务端按规范识别并返回对应响应头，或者安装相应插件，修改相应框架配置文件等。具体视服务端所用的语言和框架而定

一个spring boot项目中关于CORS配置的一段代码

HttpServletResponse httpServletResponse = (HttpServletResponse) response;
        String temp = request.getHeader("Origin");
        httpServletResponse.setHeader("Access-Control-Allow-Origin", temp);
        // 允许的访问方法
        httpServletResponse.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, OPTIONS, DELETE, PATCH");
//         Access-Control-Max-Age 用于 CORS 相关配置的缓存
        httpServletResponse.setHeader("Access-Control-Max-Age", "3600");
        httpServletResponse.setHeader("Access-Control-Allow-Headers",
                "Origin, X-Requested-With, Content-Type, Accept,token");
        httpServletResponse.setHeader("Access-Control-Allow-Credentials", "true");

在传统的 SSM 框架中使用

使用window.name来进行跨域

window对象有个name属性，该属性有个特征：即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的

使用HTML5的window.postMessage方法跨域

window.postMessage(message,targetOrigin) 方法是html5新引进的特性，可以使用它来向其它的window对象发送消息，无论这个window对象是属于同源或不同源，目前IE8+、FireFox、Chrome、Opera等浏览器都已经支持window.postMessage方法。

注意这跨域的局限性在于必须在同一个window对象上，也就是说哪个window发送消息，只有本window才能接收到。因为收发消息都是js代码，所以这本质是用js的方法跨域，双方都要写js

在同一window中，h5有个api叫postMessage,从字面意思就知道是“发送消息”的意思。

前提：跨域和被跨域的一方都是你可以控制的，一方写发送消息的，另一方写接收消息方法

1.发送消息：

window.postMessage('这是要发送的消息',''); 有两个参数，第一个参数是要发送的信息，可以是字符串也可以是json字符串，可传递较多信息。第二个参数是可以指定域名，也就是说只有符合这个域名才他发消息，如果写“”的话不管域名是啥，只要在同一个window就给它发消息。

var message={
    event:"saveSuccess",
    data:{
        channelId:self.marketingform.type,
        beginDate:self.marketingform.startTime,
        endDate:self.marketingform.endTime,
        svcType:obj.resultData.svcType
    }
}
window.postMessage(JSON.stringify(message),'http://www.xxx.com');

2.接收消息：

window.parent.addEventListener("message",function(res){
    console.log(res)
})

接收到的消息是一个对象，数据在data中 postMessage跨域的精髓就是不管你俩是否跨域，只要你俩能跟一个window扯上关系，那就能传消息，收到消息就可以处理下一步事物

比如我开头的场景，因为iframe的window和我的页面的window不是一个window，所以iframe保存完发消息要用window.parent.postMessage发送，而我的页面直接用window.addEventListener接收，接收到保存成功的消息后，将返回的id保存。

两个同域的window如果不是同一个window也是不能收发消息的，如 : 两个选项卡之间是不通的。

窗口间的通讯只能是一个页面嵌入多个iframe，多个iframe因为能靠主页面找到同一个window，才能做到多页面消息传递

nginx

通过nginx (部署) -- 解决跨域问题 -- 反向代理机制 类似 中间商 ,把访问后台的请求 转换访问自己, 让那个nginx去访问后台,把结果那会,在转给前台

缺点: 部署服务,做配置

you&ok
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
GeoServer跨域问题.zip
10-21
在Web应用开发中，跨域问题是一个常见的挑战，特别是在利用Ajax进行异步数据交互时。由于浏览器的安全策略，不同源（域名、协议或端口）之间的请求会被阻止，除非服务器允许这些跨域请求。在GeoServer的环境中，当...
springboot跨域问题解决方案
08-25
Spring Boot 跨域问题解决方案 Spring Boot 跨域问题是指在不同的源（origin）之间请求资源时出现的安全限制问题。这种限制是为了防止恶意脚本攻击，保护用户的隐私和安全。下面我们将详细介绍 Spring Boot 跨域...
服务跨域限制
镜水灵动
02-16 247
jquery.js:9664 XMLHttpRequest cannot load htt://happymmall.com/product/list.do?keyword=1. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, ch...
嵌套iframe后 解决与iframe内事件交互的跨域问题
dota333的博客
04-01 321
嵌套的iframe <iframe id="iframe" ></iframe> iframe文件中注册方法 window.addEventListener('message',function(event){ // event.origin --发送者的源 // event.source --发送者的window对象 // event.data --数据 if(event.data.type==='close'){ //此处执行事件 。。
跨域问题汇总
weixin_33736649的博客
11-25 120
跨域问题的场景和解决方案多种多样，只要是做前端开发，总会遇到。而且面试时也是必问的问题。所以自己学习总结记录一下。 因为浏览器的同源策略，前端开发会遇到各种跨域问题。本篇文章总结了遇到跨域问题的不同的场景以及对应的解决方案。 前言 在总结各种跨域问题之前，我们先来了解一下浏览器的同源策略。协议、域名、端口都相同才叫同源。具体的这里就不赘述...
postMessage消息传递——window.addEventListener的运用。实现不同框架之间混用时（iframe），页面或组件之间相互传值。
qq_40639028的博客
10-12 1万+
window.postMessage() 方法允许来自一个文档的脚本可以传递文本消息到另一个文档里的脚本，不用管是否跨域。一个文档里的脚本还是不能调用在其他文档里方法和读取属性，但他们可以用window.postMessage结合window.addEventListene这种消息传递技术来实现安全的通信。 window.addEveantListener('message',(event)=>{}) event 的属性有： data: 从其他 window 传递过来的数据副本。 ori..
vue内嵌iframe跨域通信
boundle_ss的博客
12-01 6356
​ 1、Vue组件中如何引入iframe？ 2、vue如何获取iframe对象以及iframe内的window对象？ 3、vue如何向iframe内传送信息？ 4、iframe内如何向外部vue发送信息？ ​
nginx跨域问题，解决多端口，多ip问题
03-26
Nginx 跨域问题解决方案 Nginx 是一个流行的开源 Web 服务器软件，广泛应用于 Web 服务器管理。然而，在使用 Nginx 进行服务器管理时，经常会遇到跨域问题。跨域问题是指在不同的域名、端口或协议下，无法访问...
Cesium加载Geoserver跨域问题
10-15
当我们在Cesium中尝试加载由Geoserver提供的地图服务时，可能会遇到跨域问题。这个问题主要是由于浏览器的安全策略限制了不同源之间的通信。以下是对这个问题的详细解释和解决方法。 首先，理解“跨域”是什么至关...
SpringBoot 跨域问题的解决方案
08-25
SpringBoot 跨域问题的解决方案 在本文中，我们将讨论 SpringBoot 跨域问题的解决方案，这个问题是指浏览器从一个域名的网页取请求另一个域名下的东西，通俗点说，浏览器直接从 A 域访问 B 域中的资源是不被允许的...
js addEventListener 鼠标事件类型汇总
子燕若水的博客
12-02 7544
Event Name Fired When auxclick A pointing device button (ANY non-primary button) has been pressed and released on an element. click (en-US) 在元素上按下并释放任意鼠标按键。 contextmenu (en-US) 右键点击（在右键菜单显示前触发）。 dblclick (en-US) 在元素上双击鼠标按钮。 mousedo
多种方案教你实现iframe嵌套页面相互传参(父子通信)
热门推荐
tangdou369098655的博客
06-30 2万+
在工作中，我们会遇到一些需求，使用iframe嵌套另一个页面，这个页面大部分情况下不会部署在父页面相同的域名下，但是又需要父子页面进行数据交互，那么我们该怎么处理呢？接收postMessage方的怎么用呢？postMessage方法有三个参数。欢迎大家指出文章需要改正之处~iframe页面添加代码。iframe页面添加代码。iframe页面添加代码。iframe页面添加代码。一起来看一下效果吧~
postMessage，addEventListener， 前端跨域请求之js代码解析
09-05 2146
postMessage，addEventListener 前端跨域发送监听信号
window.parent.postMessage 解决iframe父子页面域名不一样出现的跨域问题
u011200562的博客
08-01 4492
window.parent.postMessage 解决iframe父子页面域名不一样出现的跨域问题。父页面的参数，但是原因两个的域名不一样，所以会出现。
关于跨域
u012841667的专栏
10-22 272
一、jsonp 参考：http://blog.csdn.net/navy_xue/article/details/40016475 由于浏览器一般不对script，img等进行跨域限制，所以我们有机会通过script的方式来实现跨域访问。但img、iframe、script等标签是个例外，这些标签可以通过src属性请求到其他服务器上的数据。 JSONP的缺点则是：它只支持
通过addEventListener 绑定的事件会出现多次调用方法的情况
tang_jian_dong的博客
03-03 3792
这会出现两次 window.addEventListener("message", function( event ) { alert(event.data) }); 改为这种， 只会出现一次 window.onmessage=function(event){ alert(event.data) } ...
使用window.postMessage()时，window.addEventListener()不能成功监听到消息。
qq_38643387的博客
03-04 6447
使用window.postMessage()时，window.addEventListener()不能成功监听到消息。 尝试使用以下方法： 父： <iframe src='../helloWord.html'> <script> window.addEventListener('message',function(e){ //代码 },false); <script> //iframe方式打开子页面 子： targetWin = window.par
HTML5之postMessage和addEventListener实现<iframe>跨域通信
MOONCOM的博客
11-16 3652
使用postMessage实现跨域的前提条件是一个页面通过调用另一个页面，示例如下所示： 在这个示例中，通过outter.html调用inner.html 这是outter.html function outmethod(){ var value=document.getElementById("outtext").value; document.getElementById("if
axios 跨域问题
最新发布
09-29
跨域问题是指当一个请求的协议、域名、端口与当前页面的URL不同，就会发生跨域。在Vue中使用Axios解决跨域问题可以通过设置代理来实现。在Nuxt中使用Axios解决跨域问题需要安装 @nuxtjs/axios 和 @nuxtjs/proxy 两个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值