精华内容
下载资源
问答
  • 跨域产生原因分析与解决方案,这一次彻底搞懂它.docx
  • AJAX跨域产生原因及解决方法

    万次阅读 2018-06-11 20:53:08
    什么是跨域: 跨域问题来源于JavaScript的同源策略...跨域问题是针对JS和ajax的,html本身没有跨域问题,比如a标签、script标签、甚至form标签(可以直接跨域发送数据并接收数据)等 AJAX产生跨域原因:(3个问题同...

    什么是跨域:

            跨域问题来源于JavaScript的同源策略,即只有 协议+主机名+端口号 (如存在)相同,则允许相互访问。也就是说JavaScript只能访问和操作自己域下的资源,不能访问和操作其他域下的资源。跨域问题是针对JS和ajax的,html本身没有跨域问题,比如a标签、script标签、甚至form标签(可以直接跨域发送数据并接收数据)等 

    AJAX产生跨域原因:(3个问题同时满足 才可能产生跨域问题)

    浏览器限制

    跨域(协议,主机名,端口号中有一个不同就产生跨域)

    XHR(XMLHttpRequest)请求

    浏览器会先执行还是先判断跨域?

            简单请求会先执行在判断,非简单请求先判断再执行


    解决方法 :对浏览器限制修改不常用,主要解决跨域方式达到解决跨域问题

    所以一般还是以XHR请求方式请求,主要解决跨域问题,两种方式

    一--被调用方解决(在相应请头部增加字段,告诉浏览器支持跨域访问

            服务器端实现

                    Filter解决方案,如下图:



                            

            NGINX配置

                    实际工作中多以此方法解决ajax跨域问题,新建自己的nginx配置文件 在nginx.conf结尾添加如下语句


    自己的配置文件中添加如下配置(红框中重点)


            APACHE配置

    二--调用方解决(隐藏跨域)nginx 处理方式

        1.配置反向代理


    2.ajax请求url填写虚拟主机反向代理服务器的名字



    改变XHR请求方式的跨域解决方法(不推荐)

             JSONP---客户端ajax请求加上 dataType : "jsonp",


    就不会是XHR请求,而是script请求,后台创建类继承AbstractJsonpResponseBodyAdvice,类上加上@ControllerAdvice注解  重写构造函数 如下


    普通js请求返回类型是json而,jsonp返回的是js代码(函数调用形式:函数名是callback参数值,函数参数是原来要返回的值),jsonp约定的参数名是callback,也可以自定义,格式为: jsonp:'callback2',此时后台构造函数super里写callback2即可,这种方式也有一些弊端

            JSONP弊端

                    服务器需要改动代码支持-(自己的项目还好,如果是调用别人的接口,别人没有设置jsonp访问形式的话就不行了)

                    只支持GET方式请求(因为要返回js代码)

                    请求不是XHR(没有异步刷新功能)







    展开全文
  • 1、跨域原因 跨域是是因为浏览器的同源策略限制,是浏览器的一种安全机制,服务端之间是不存在跨域的。 所谓同源指的是两个页面具有相同的协议、主机和端口,三者有任一不相同即会产生跨域。 2、跨域举例 3、跨域...

    1、跨域的原因

    跨域是是因为浏览器的同源策略限制,是浏览器的一种安全机制,服务端之间是不存在跨域的。

    所谓同源指的是两个页面具有相同的协议、主机和端口,三者有任一不相同即会产生跨域。

    2、跨域举例

    img

    3、跨域的解决办法

    1.跨域资源共享cors解决跨域

    在了解cors解决跨域之前,我们先来了解一下什么是简单请求和非简单请求。

    工作中比较常见的简单请求:

    1. 请求方法为:HEAD、GET、POST中的一种。
    2. HTTP请求头中字段不超过:Accept、Accept-Language、Content-Language、Last-Event-ID
    3. Content-Type字段值为application/x-www-form-urlencodedmultipart/form-datatext/plain中的一种。

    满足以上条件的即为简单请求,否则即为非简单请求。

    工作中常见的非简单请求:

    1. 请求方法为put、delete.
    2. 发送JSON格式的ajax请求。
    3. http中带自定义请求头。

    对于简单请求:

    浏览器发现是跨域请求,就会自动在请求头中加上Origin字段,代表请求来自哪个域(协议+主机名+端口号)。服务器在收到请求后,根据请求头中Origin字段值来判断是否允许跨域请求通过。具体实现方法是:在响应头Access-Control-Allow-Origin字段中设置指定的域名,表示允许这些域名的跨域请求。如果请求头中Origin字段的域名包含在这些域名中,则可以实现跨域请求(当然有时候还需要结合其他字段来判断),否则不通过。例如:

    请求头信息:

    GET /cors HTTP/1.1
    
    
    
    Origin: http://localhost:8080/
    
    
    
    Accept-Language: en-US
    
    
    
    Connection: keep-alive
    
    
    
    User-Agent: Mozilla/5.0...
    

    Origin字段说明本次请求来自:http://localhost:8080/。

    响应头信息:

    Access-Control-Allow-Origin: http://localhost:8080/
    
    
    
    Access-Control-Allow-Credentials: true
    
    
    
    Content-Type: text/html; charset=utf-8
    

    说明 http://localhost:8080/在服务器允许的范围内。

    Access-Control-Allow-Credentials字段代表服务器允许cookie可以包含在请求中,一起发送给服务器,值为布尔类型。如果要把cookie一起发送到服务器,还需要在请求中打开withCredentials属性。

    var xhr = new XMLHttpRequest();
    
    
    
    xhr.withCredentials = true;
    

    注意:如果要发送cookie,Access-Control-Allow-Origin的值不能为“*”,只能是具体的域名。

    非简单请求:

    非简单请求在发送http请求时,会预先发送一次“预检”(OPTIONS)请求。预检请求会事先询问服务器,当前域名是否在服务器允许的范围内,以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复后,浏览器才会真正发出http请求,否则就会报错。例如:

    var url = 'http://localhost:8080/';
    
    
    
    var xhr = new XMLHttpRequest();
    
    
    
    xhr.open('PUT', url, true);
    
    
    
    xhr.setRequestHeader('Header-1', 'value');
    
    
    
    xhr.send();
    

    上述代码中,http发送了一条PUT请求,并且自定义请求头信息Header-1.

    Access-Control-Allow-Origin: http://localhost:8080/
    
    
    
    Access-Control-Allow-Methods: GET, POST, PUT
    
    
    
    Access-Control-Allow-Headers: Header-1
    
    
    
    Content-Type: text/html; charset=utf-8
    
    
    
    Access-Control-Max-Age: 3600
    

    上述http响应中,说明服务器允许http://localhost:8080/请求数据,

    Access-Control-Max-Age表示本次预检请求的有限期,单位为秒,在此期间内,不用发出另一条预检请求。

    一旦服务器通过了“预检”请求,以后每次浏览器正常请求CORS请求,就跟简单请求一样。会有Origin字段,响应头里也会有对应的Access-Control-Allow-Origin字段。

    2.设置代理服务器

    经过网关的在网关统一处理,没经过网关的在nginx做处理

    参考

    http://www.ruanyifeng.com/blog/2016/04/cors.html

    展开全文
  • 对那些可能对服务器数据产生副作用的 HTTP 请求方法(特别是 GET 以外的 HTTP 请求,或者搭配某些 MIME 类型的 POST 请求),浏览器必须首先使用 OPTIONS 方法发起一个预检请求(preflight request),从而获知...

    概述

    在这里插入图片描述

    同源策略(SOP)是Web浏览器强制执行的一种安全策略,用于控制对网站和Web应用程序之间数据的访问。 没有SOP,任何网页都将能够访问其他页面的DOM。 这将使它可以从另一个网页访问潜在的敏感数据,以及在未经用户同意的情况下在其他网页上执行操作。
    SOP不是Internet标准或固定规则,而是通用的浏览器安全策略。 不同的浏览器对它的解释不同。 对于不同的技术(例如cookie),它的工作方式也有所不同。 但是,总体思路保持不变:帮助确保没有未经授权的跨站点访问。

    源指的是什么

    用网络术语来说,来源是网络资源的一组共同特征。 在大多数情况下,源是三个元素的组合:模式(协议),主机名(域/子域)和端口。 因此,由协议 域名 端口标识的所有资源都具有相同的来源。 但是,只要其中之一不相同,现代浏览器(例如Google Chrome或Mozilla Firefox)也会认为这些资源具有不同的来源。 仅在使用Microsoft Internet Explorer的情况下,该端口才不视为来源的一部分。
    举例说明

    • http://www.example.com/page.html and http://www.example.com/subpage/page2.html HTML
      三要素都一样所以是同源的
    • http://www.example.com/page.html and https://www.example.com/page.html
      是不同的源,因为协议不同。http 和 https
    • http://www.example.com/page.html and http://example.com/page.html
      是不同的源因为子域名不同
      http://www.example.com/page.html and http://www.example.com/page.html:8080
      是不同的源因为端口不同

    同源策略的应用场景

    在不同来源的元素之间可能发生交互作用的所有情况下,浏览器都会应用原始检查。 这包括但不限于:

    • 例如,JavaScript代码和文档对象模型(DOM),页面无法访问其iframe的内容,除非它们具有相同的来源。
    • Cookies,例如,您针对特定站点的会话Cookie不能发送到来源不同的页面。 但是,对于cookie,不评估架构和端口,仅评估域/子域。
    • AJAX调用(XmlHTTPRequest)。

    同源策略不能完全解决不同源之间的相互作用 以下的一些情况也会有允许跨域的情况。

    • 可以在不同的源之间提交表单。 例如,您可以创建跨域链接,也可以跨域提交表单。
    • 通常可以在原点之间嵌入。 例如,可以在iframe中使用其他来源的内容(如果X-Frame-Options允许),或者在其他站点中嵌入img,css或脚本。
      但是,原点之间的读取通常被阻止。 这通常意味着您可以发送跨域请求,但无法读取回复。

    直接看如何解决

    在nginx server块添加配置

         	add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Credentials' 'true';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT,OPTIONS, DELETE';
            add_header 'Access-Control-Allow-Headers' 'Authorization,DNT,X-Token,token,TOKEN,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
            #access_log  logs/host.access.log  main;
    
             if ($request_method = 'OPTIONS') {
            return 200;
       		 }
    

    有多种方式可以解决跨域问题(放松浏览器安全策略
    http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html
    这个是阮大神的总结

    Cross-Origin Resource Sharing

    CORS 是一种比较好的解决方案。这个模式就是用了预检的请求。也就是正常请求前的 options请求。

    在这里插入图片描述
    跨域资源共享(CORS)是一种HTTP机制,使用HTTP请求头定义源的权限。 使用CORS标头,可以通知浏览器来自其他来源的资源有权访问页面上的资源。
    例如
    对站点的GET请求可能与声明确切来源的Origin请求标头一起发送(类似于document.domain):

    GET / HTTP/1.1
    Host: www.example.com
    (...)
    Origin: http://example2.com
    

    作为回应如果支持CORS的资源将发送Access-Control-Allow-Origin响应标头:

    HTTP/1.1 200 OK
    (...)
    Access-Control-Allow-Origin: http://example2.com
    (...)
    

    Access-Control-Allow-Origin标头可以声明单个源,源列表或通配符(*)。 当然,使用通配符会带来很大的风险,但这取决于Web应用程序开发人员。

    在options 请求后就会发送正常的请求。

    options 请求

    什么是options 请求

    1 获取服务器支持的http 请求的方法。
    2 检查服务器的性能,例如 ajax 进行跨域请求时候的预检测,需要向另外一个资源发送一个 HTTP OPTIONS的请求头,用来判断实际发送的请求是否安全。这里的options 请求是浏览器的一种策略不是后端发起的

    规范要求,对那些可能对服务器数据产生副作用的 HTTP 请求方法(特别是 GET 以外的 HTTP 请求,或者搭配某些 MIME 类型的 POST 请求),浏览器必须首先使用 OPTIONS 方法发起一个预检请求(preflight request),从而获知服务端是否允许该跨域请求。服务器确认允许之后,才发起实际的 HTTP 请求。

    “需预检的请求”要求必须首先使用 OPTIONS 方法发起一个预检请求到服务器,以获知服务器是否允许该实际请求。

    当请求满足下述任一条件时,即应首先发送预检请求(使用OPTIONS):

    1、使用了下面任一 HTTP 方法:

    PUT

    DELETE

    CONNECT

    OPTIONS

    TRACE

    PATCH

    2、人为设置了对 CORS 安全的首部字段集合之外的其他首部字段。该集合为:

    Accept

    Accept-Language

    Content-Language

    Content-Type (but note the additional requirements below)

    DPR

    Downlink

    Save-Data

    Viewport-Width

    Width

    3、Content-Type 的值不属于下列之一:

    application/x-www-form-urlencoded

    multipart/form-data

    text/plain

    跨域的多种解决方式

    1 nginx
    2 后端服务端 通过过滤器,或者是conf配置。
    3 前端配置代理。

    调试

    postman 复现跨域问题

    在请求头中添加如下配置
    在这里插入图片描述

    展开全文
  • 同源策略:是指协议(http、https、rtmp…)、域名(jd、taobao、baidu)、端口(80、8080、443)其中有一个不同都产生跨域 跨域引发的请求报错浏览器显示如下图 Access to XMLHttpRequest at '...

    跨域:是指浏览器不能执行其他网站的脚本,它是由浏览器的同源策略造成的,是浏览器对JavaScript施加的安全限制!

    同源策略:是指协议(http、https、rtmp…)、域名(jd、taobao、baidu)、端口(80、8080、443)其中有一个不同都产生跨域

    跨域引发的请求报错浏览器显示如下图
    在这里插入图片描述

    Access to XMLHttpRequest at 'http://192.168.0.99:3331/authentication/form?username=TAO&password=123456' from origin 'http://192.168.0.99:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
    

    在跨域请求时会有一个打头兵,这个打头兵被称为预检请求,请求方式为OPTIONS
    在这里插入图片描述
    官方文档跨域详细介绍
    在这里插入图片描述

    在这里插入图片描述
    在这里插入图片描述

    这里提供常见的跨域场景解决方案

    1.SpringBoot单体项目前后端分离解决跨域(后续跟上)
    2.微服务情况下前后端分离Gateway解决跨域(后续跟上)
    3.前后端分离情况下微服务+Gateway+SpringSecurity解决跨域
    4.vue配置代理解决跨域(后续跟上)
    5.Nginx三方中间件决绝跨域(后续跟上)

    展开全文
  • 文章目录@[toc]版本信息问题描述跨域产生原因跨域分简单跨域和非简单跨域简单跨域复杂跨域解决策略nginx层面(推荐)服务端代码层面 版本信息 版本号 变更内容 作者 时间 1.0.0 - 初始版本; Jisen 2021.06....
  • /*设置整体一个旋转角度*/ } 二 在弧度下画一个椭圆,只显示一部分 1 先形成一个椭圆: .lowerLip{ width: 300px; /*决定了椭圆的宽度*/ height: 3500px; background: #fc4a62; border-radius: 200px/2000px; /*...
  • 跨域产生原因及处理方式
  • 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的。 广义的跨域: 1.) 资源跳转: A链接、重定向、表单提交 2.) 资源嵌入: < link > 、 < script > 、 < img > 、 < frame > 等dom...
  • 跨域产生原因 出于浏览器的同源策略限制。同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的。浏览器只是...
  • Ajax跨域问题产生原因及解决方法

    千次阅读 2018-06-24 17:46:58
     产生跨域原因:1.浏览器限制2.跨域:协议,域名,端口任何一个不同就是跨域3.Xhr(XMLHttpRequest)请求 解决思路:1.改动客户端浏览器参数来解除限制 浏览器启动加入 --disable-web-security2.Jsonp解决xhr...
  • 知道了产生原因就知道为什么那样解决了 有一个条件不同,我们都可以理解为存在跨域问题。
  • 产生跨域原因

    2018-12-04 12:56:00
    产生跨域原因 浏览器的限制 跨域 XHR(XMLHttpRequest)请求 1、浏览器的限制   请求200表示请求成功   后台日志也打了,说明后台服务调到了,跨域问题是浏览器的限制导致的 2、跨域 跨域概念:...
  • 跨域问题产生原因以及十种解决方案

    千次阅读 热门讨论 2021-04-08 21:44:33
    一、什么是跨域? 同源策略:协议+域名+端口 三、解决方案 1.JSONP跨域 2.跨域资源共享(CORS) 简单请求 CORS跨域示例 3.nginx代理跨域 nginx配置解决iconfont跨域 nginx反向代理接口跨域 4.nodejs中间件代理跨域 5...
  • 1.跨域问题的由来 何谓同源:URL由协议、域名、端口和路径组成,如果两个URL的协议、域名和端口相同,则表示它们同源。浏览器的同源策略,从一个域上加载的脚本不允许访问另外一个域的文档属性,是浏览器上为安全性...
  • 跨域产生原因

    2021-08-24 16:48:28
    跨域产生原因 最近调整项目时老是碰到跨域的问题,索性做一个总结,方便后面查询复习使用: 1.跨域是什么意思? 首先一个url是由:协议、域名、端口 三部分组成。(一般端口默认80) 如:...
  • 跨域原因以及解决方案

    千次阅读 2020-12-31 10:32:49
    一、跨域原因 跨域是因为同源策略,同源策略是为了网页的安全而产生的一个约定,使不同端口、域名、协议的客户端脚本在没有明确授权的情况下,不能读写对方资源。但有时又需要不同源网页之间进行这一系列操作,...
  • (一)跨域的问题的出现肯定是因为请求数据时产生的,产生原因是因为一下三点: http: //www.baidu.com :8080/ /dir/index.html 协议 域名 80端口,可省 1.域名不同2.协议不同3.端口不同 (二) 这里解决的...
  • 跨域问题的产生原因和相应的解决方式

    万次阅读 多人点赞 2017-11-28 11:07:12
    对于完全不同源的网站,目前有三种方法,可以解决跨域窗口的通信问题。 片段识别符(fragment identifier) window.name 跨文档通信API(Cross-document messaging) 3.1 片段识别符 片段标识符(fragment ...
  • 什么是跨域 当请求URL的协议、域名、端口号其中任意一个与当前页面url不同时,就是跨域。 为什么会发生跨域(同源策略) 浏览器具有同源策略,只有同源才能相互访问,不同源,则会发生跨域。 1、什么是同源? 同源...
  • 跨域原因及解决方案

    2018-10-10 11:53:48
    跨域原因: 浏览器限制,浏览器出于安全原因,当它发现你的请求跨域了,它就会开启校验,如果校验不通过就会报跨域安全错误; 请求域名、协议、端口不一致,产生跨域; 发出的是XHR(XMLHttpRequest)请求; ...
  • ajax--跨域产生原因

    2018-04-23 22:34:24
    协议,域名,端口只要有一个不同即为跨域。1. 浏览器限制 很多情况下,有的人会认为跨域是服务器端造成的,实际上不是。 如图:发送get1()请求,控制台打印出了跨域报错,但是实际上这个请求状态码为200,请求是...
  • 什么是跨域以及产生原因

    千次阅读 2018-07-29 22:34:43
    什么是跨域以及产生原因 跨域是指a页面想获取b页面资源,如果a、b页面的协议、域名、端口、子域名不同,或是a页面为ip地址,b页面为域名地址,所进行的访问行动都是跨域的,而浏览器为了...
  • 跨域问题的出现原因: 1.当使用http 时,不同的端口访问会出现跨域问题。如:前端的端口为8080,而后端的端口为8081,在前端向后台获取数据时会出现跨域问题,如下 OPTIONS ...
  • 关于跨域产生原因,以及解决方案 浏览器的安全基石“同源政策”,基于此产生跨域问题。 同源指的是三个相同:协议相同(例如http)、端口相同、域名相同。 例如 http://www.baidu.com/ 协议是http,域名是 ...
  • 跨域问题产生原因

    千次阅读 2018-12-29 17:45:37
    1.为什么会产生跨域问题? JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象,即同源政策。通俗的讲,为了安全所以浏览器进行了限制,所以不能进行跨域。 2.什么是跨域的问题? 浏览器从一个域名的...
  • 跨域它是浏览器的一种同源策略限制,同源策略的又是一种浏览器约定,也是浏览器最核心的安全功能,缺少同源策略,浏览器以及网站很容易受到各种攻击,如常见的XSS、CSFR等攻击。 2、那为什么会出现跨域呢? 我们都...
  • 前端跨域问题原因分析以及解决方式

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 15,887
精华内容 6,354
关键字:

跨域产生的原因