精华内容
下载资源
问答
  • 前后端分离项目,跨域问题如何解决?为什么会有跨域这个问题?
    千次阅读 多人点赞
    2019-10-17 14:29:09

     

    首先, 在开篇, 我需要声明一点, 请善用搜索引擎, 百度即便是对于搜技术解决方案再垃圾, 也不可能你 跨域 这种基础的问题都找不到答案的, 跨域根本不算是什么大问题. 而且, 不要总是特立独行, 你只是个普通人, 胳膊永远是拧不过大腿的, 学会团队合作, 学会和后端沟通, 和技术总监沟通, 把你的意见发表出来, 并说出因为所以然.

    为什么会有跨域这个问题

    1. 因为前端代码是跑在 浏览器 里的, 你的所有网路请求说白了就是 浏览器 帮你发出去的. 并不是什么 js 帮你发出去的, js只是一门语言, 他只是按照浏览器的要求, 语法的要求, 按照一定的规范和格式, 把数据发出去, 就是这样.
    2. 为什么后端没有跨域这个问题, 因为后端是跑在 系统 里面的
    3. 浏览器可以主动发起一个 跳过跨域 的网络请求(放弃吧! 和前端无关! 儿子控制不了爸爸), 但是他不会让你在 它的内核 里发起跨域请求. 浏览器是跑在 系统 里的, 后端写的程序也是直接跑在 系统 里的, 前端相当于是 浏览器的下属, 得听从 浏览器 的规则.
    4. 为什么浏览器不允许你去发送跨域请求? 很简单, 因为没有那家浏览器有那个能力自己造内核, 基本都是行业内比较知名的内核, 比如 chrome 的内核, 浏览器只是一个壳, 然后把内核嵌入进去, 你前端界面的渲染包括界面的展示, 并不是浏览器弄出来的, 而是内核渲染出来的.
    5. 既然这个问题明白了, 只要是个正常人, 都能明白了, 浏览器需要按照内核的要求, 来界定你是否可以发一个跨域请求出去. 非常不幸的告诉你, 是个正常的内核, 纯前端都是不允许发跨域请求的.

    拆台杠精上线

    博主, 我觉得你说的不对, 你看哈, 我要使用 vue-cli 建立的 webpack 项目, 配置了 proxyTable , 使用 npm run dev 跨域访问了! 你这说的不对, 前端是可以发跨域请求的!

    1. 首先, 请把这个单词翻译过来理解下: proxyTable, 是什么意思? 代理表, 什么是代理, 代理就是代替你请请求某个url并将结果返回给你, 谁给你代理? 并不是浏览器给你代理的, 是 vue-cli 下的 小型服务器 帮你去请求这个url的, 换言之就是, 你在网页上发起了一个 ajax 请求, 小型服务器会拦截你这个请求, 然后帮你发出去, 然后等对面回应了, 再将结果返回给你. 浏览器根本就管不到了. 浏览器这时候只负责的角色是: 这里有人要发起一个ajax请求了, 呐, 丢给你, 你去处理吧, 处理好了丢给我, 我再给他 , 是这样的, 明白不?
    2. 还有, 小型服务器只有在 npm run dev 模式下才有效, 也就是说, 只有在开发模式下代理表才生效, 如果你是构建的代码 npm run build 那个对不起, 没人给你拦截请求并代替你请求了, 又回归到浏览器的约束层, 明白不?

    博主, 不行! 你说的还不对, 我就是觉得不对, 那你说, 为什么我自己请求你所谓的那个小型服务器就没有跨域的提示?

    1. 很简单, 因为你们符合 同源策略, 这个名词我再稍后再详细讲解, 对于浏览器而言, 你们是 一家人, 既然是一家人, 那浏览器还管你干嘛? 管多了还怪浏览器"多管闲事"呢. 而对于不符合同源策略的规则, 浏览器就类似于扮演着"银行"的角色, 你们都不是一个家人, 凭什么我让你从他的卡里取钱? 待会人家钱没了还怪我喽? 这傻X事情浏览器可不做.

    什么是同源策略

    1. 同源策略, 通俗易懂的解释就是 界定你们是一家人的标志
    2. 如何才是一家人? 很简单, 协议, 域名, 端口 全部一致, 即可
    3. 举个例子: 你在本地跑一个项目, 端口是8080, 然后去请求百度的接口(打个比方), 肯定是不符合同源策略的, 你看, 你本地是什么地址? 127.0.0.1? localhost? 百度呢? baidu.com, 你看, 不一样吧. 你本地肯定是 http:// 打头吧? 百度呢? https:// 打头, 你看, 又不一样, 那百度的端口呢? 80(为什么是80这里不扩展了,懂的自然懂), 你呢? 8080, 如果是你, 你会觉得这两个玩意是一家人???

    如何解决呢

    如果您仔细阅读了上面的因为所以然, 那么您一定能猜到怎么解决问题了, 那很简单, 就是让浏览器 认为 你们是一家人, 就这样, 那怎么解决呢? 也很简单, 注意, 如下部分请给后端人员看, 纯前端我说的已经很清楚了, 无法处理跨域请求. 还不理解的在读一遍博文.

    • 小伙伴, 首先, 你需要写一个拦截器, 然后把所有接口(假设你所有接口都需要前端去请求而不是自己用的话)拦截住, 然后统一修改请求头部分即可.

      • 添加 Access-Control-Allow-Origin 字段, 表示允许那些域名访问接口, 图省事的话, 参数填写成星号即可(*), 及允许任何域名访问接口, 当然很显然, 这是不安全的, 部署上线阶段建议改为指定的域名
      • 添加 Access-Control-Allow-Methods 字段, 表示允许那些类型的请求, 图省事也可以填写成星号(*), 这个一般对安全影响不到, 较真的话可以写成 GET,POST, 因为一般来说, 接口都只用这两种方式(不接受杠精)
      • 如果您的身份验证机制还是 session 的话, 强烈建议您和您的老板说, 换成JWT的模式, 至于JWT是个什么鸟玩意自行百度或者我有时间再写吧! 前后端分离的模式标配 JWT, session的模式属于SSR那种模式的标配, 跑题了, 如果你的验证方式是 session 的话, 那么不好意思, 你还要添加一个 Access-Control-Allow-Credentials 字段, 参数为 true, 表示允许发送身份凭证(也就是所谓的sessionID)到接口, 前端的ajax请求还需要调整, 具体可看后面的博文), 这样, 您的后端程序, 才能通过 sessionID找到对应的某个用户, 然后就不用我说了, 你懂得...
    更多相关内容
  • 为什么会有跨域问题出现,如何解决跨域问题 什么是跨域 ​ 定义: 跨域是指a页面想获取b页面资源,如果a、b页面的协议、域名、端口、子域名不同,所进行的访问行动都是跨域的,而浏览器为了安全问题一般都限制了...

    为什么会有跨域的问题出现,如何解决跨域问题

    什么是跨域

    ​ 定义: 跨域是指a页面想获取b页面资源,如果a、b页面的协议、域名、端口、子域名不同,所进行的访问行动都是跨域的,而浏览器为了安全问题一般都限制了跨域访问,也就是不允许跨域请求资源。注意:跨域限制访问,其实是浏览器的限制。理解这一点很重要!!!

    ​ 指的是浏览器不能执行其他网站的脚本,它是由浏览器的同源策略造成的,是浏览器对
    javascript 施加的安全限制,防止他人恶意攻击网站.

    ​ 比如一个黑客,他利用 iframe 把真正的银行登录页面嵌到他的页面上,当你使用真实的用户
    名和密码登录时,如果没有同源限制,他的页面就可以通过 JavaScript 读取到你的表单中输
    入的内容,这样用户名和密码就轻松到手了。

    什么是同源策略

    ​ 同源策略 是客户端脚本(尤其是 Javascript)的重要的安全度量标准。它最早出自 Netscape
    Navigator2.0,其目的是防止某个文档或脚本从多个不同源装载。所谓同源指的是:协议,
    域名,端口相同,同源策略是一种安全协议,指一段脚本只能读取来自同一来源的窗口和
    文档的属性

    解决方式

    1、jsonp

    1.1)去创建一个 script 标签

    1.2)script 的 src 属性设置接口地址

    1.3)接口参数,必须要带一个自定义函数名 要不然后台无法返回数据。

    1.4)通过定义函数名去接收后台返回数据

    //去创建一个 script 标签 
    var script = document.createElement("script"); 
    //script 的 src 属性设置接口地址 并带一个 callback 回调函数名称
    script.src = "HTTP://127.0.0.1:8888/index.php?callback=jsonpCallback"; 
    //插入到页面 
    document.head.appendChild(script); 
    //通过定义函数名去接收后台返回数据 
    function jsonpCallback(data){ 
    //注意 jsonp 返回的数据是 json 对象可以直接使用 //Ajax 取得数据是 json 字符串需要转换成 json 对象才可以使用。 
    }
    

    2、 CORS:跨域资源共享

    ​ 原理:服务器设置 Access-Control-Allow-OriginHTTP 响应头之后,浏览器将会允许跨域请求
    ​ 限制:浏览器需要支持 HTML5,可以支持 POST,PUT 等方法兼容 ie9 以上,需要后台设置

    2.1)跨域请求后的响应头中需要设置

    2.2)Access-Control-Allow-Origin 为发起请求的主机地址

    2.3)Access-Control-Allow-Credentials,当它被设置为 true 时,允许跨域带 cookie,但此时 Access-Control- Allow-Origin 不能为通配符*

    2.4)Access-Control-Allow-Headers,设置跨域请求允许的请求头

    2.5)Access-Control-Allow-Methods,设置跨域请求允许的请求方式

    Access-Control-Allow-Origin: * //允许所有域名访问,或者
    Access-Control-Allow-Origin: HTTP://a.com //只允许所有域名访问
    

    3、反向代理

    3.1)使用 vue-cli 脚手架搭建项目时 proxyTable 解决跨域问题

    //打开 config/index.js,在 proxyTable 中添写如下代码:
    //会拦截到/api的请求代理到目标服务器 http://f.apiplus.cn/xxx
    proxyTable: {  
        '/api':{ 
            target: 'http://f.apiplus.cn', //目标服务器地址
            changeOrigin: true, //改变源,是否跨域
            pathRewrite: { 
            	'^/api': '/xxx' //路径重写,重定向
            }
        }
    }
    

    4.window+iframe

    ​ 需要目标服务器响应window.name

    5.nginx反向代理解决跨域问题

    ​ 找到nginx的配置文件“nginx.conf”,修改一下信息.

    server {
            listen       80; #监听80端口,可以改成其他端口
            server_name  localhost; # 当前服务的域名
    
            #charset koi8-r;
    
            #access_log  logs/host.access.log  main;
    
            location / {
                proxy_pass http://localhost:81;
                proxy_redirect default;
            }
    
    		location /apis { #添加访问目录为/apis的代理配置
    			rewrite  ^/apis/(.*)$ /$1 break;
    			proxy_pass   http://localhost:82;
           }
    #以下配置省略
    
    配置解释:
    
    1.由配置信息可知,我们让nginx监听localhost的80端口,网站A与网站B的访问都是经过localhost的80端口进行访问。
    
    2.我们特殊配置了一个“/apis”目录的访问,并且对url执行了重写,最后使以“/apis”开头的地址都转到“http://localhost:82”进行处理。
    
    3.rewrite  ^/apis/(.*)$ /$1 break; 
    
    代表重写拦截进来的请求,并且只能对域名后边以“/apis”开头的起作用,例如www.a.com/apis/msg?x=1重写。只对/apis重写。
    
      rewrite后面的参数是一个简单的正则 ^/apis/(.*)$ ,$1代表正则中的第一个(),$2代表第二个()的值,以此类推。
    
      break代表匹配一个之后停止匹配。
    

    在这里插入图片描述

    展开全文
  • 为什么会产生跨域问题

    千次阅读 2019-10-19 19:17:45
    同时满足三个条件才可能产生跨域问题。 解决跨域问题方案。 1,从浏览器出发,允许浏览器跨域。 2,从XHR(XMLHttpRequest)出发     (1)避免发生跨域。使用jsonp,由于jsonp请求是通过script的...

    1、浏览器限制

    2、跨域(协议,域名,端口不一样都是跨域)

    3、XHR(XMLHttpRequest请求)

    同时满足三个条件才有可能产生跨域问题。

    解决跨域问题方案。

    1,从浏览器出发,允许浏览器跨域。

    2,从XHR(XMLHttpRequest)出发

        (1)避免发生跨域。使用jsonp,由于jsonp请求是通过script的方式发送的(只有xhr的请求方式才有可能产生跨域问题),所以不会产生跨域问题。Spring MVC实现过程:前台使用ajax的get请求,将dataType设为“jsonp”;服务器创建一个类并继承抽象类AbstractJsonReponseBodyAdvice,最后注解@ControllerAdivece。使用jsonp的弊端,只能使用get方式请求,服务器需要改动代码,发送的不是xhr请求。

        (2)产生跨域后解决。

                从被调用方考虑,有三种情况,分别是服务器实现,nginx配置和apache配置。

                服务器实现需要注意两种情况,简单请求和非简单请求。简单请求是先执行请求再验证,非简单请求是先验证再请求。

              简单请求(比较常见):方法为get,head,post,请求header里面没有自定义头,Content-Type的值为以下几种 text/plain,multipart/form-data,application/x-www-form-urlencoded。

                非简单请求(比较常见):put,delect方法的ajax请求,发送json格式的ajax请求,带自定义头的ajax请求。

                简单请求处理方案:在响应头中添加

                    Access-Control-Allow-Origin=“允许跨域的url”,即跨省域时,请求头Origin的值,所以一般是获取Origin的值。

                    Access-Control-Allow-Method=“*”,允许的方法。

                非简单请求处理方案:在相应头中添加

                    Access-Control-Allow-Origin=“允许跨域的url”,即跨域时,可以获取请求头Origin的值。

                    Access-Control-Allow-Method=“*”,允许的方法

                    Access-Control-Request-Headers=“Content-Type,自定义的header的key”。

                 带cookies的跨域解决:在响应头添加

                    Access-Control-Allow-Credentials,="true",允许使用cookies

                   ngnix配置:


    apache配置:没搞过

    若是使用spring框架:使用@CrossOrigin注解既可以实现服务端跨域

                        

        

    展开全文
  • 1、为什么会产生跨域 答:因为浏览器的同源政策,就会产生跨域。比如说发送的异步请求是不同的两个源,就比如是不同的的两个端口或者不同的两个协议或者不同的域名。由于浏览器为了安全考虑,就会产生一个同源政策,...

    一、跨域

    1、为什么会产生跨域

    答:因为浏览器的同源政策,就会产生跨域。比如说发送的异步请求是不同的两个源,就比如是不同的的两个端口或者不同的两个协议或者不同的域名。由于浏览器为了安全考虑,就会产生一个同源政策,不是同一个地方出来的是不允许进行交互的。

    2、怎么解决跨域

    解决跨域的方法:第一种jsonp的方法。第二种使用CORS解决跨域问题,即跨域资源共享,在后端设置响应头部,加一句代码:access-control-allow-origin:"*"或者允许交互的域名。第三种使用vue,找到config文件下->index.js文件,修改propyTable中的target的值,就可实现用前端解决跨域。第四种,使用代理;第五种,使用postmessage

    1、jsonp方法:

    jsonp是一种借助于 script 标签发送跨域请求的技巧方案。script的src属性可以访问网络上的资源,并script标签可以拿到响应体。

    <script>
        function test(json){
            console.log('我被调用了');
            console.log(json);
       }
    </srcipt>
    <script src="http://api.douban.com/v2/movie/top250?callback=test"></script>
    

    我们可以看到,我们预先定义了一个函数叫test,再然后在src里加了一个参数callback=test,可以发现,当请求完成,会自动调用test这个函数,并且把响应体(JSON数据)当做参数传递过来.实际上是浏览器用script的src去发起请求,并且传递一个参数叫callback=函数名,服务器接收到这个函数名,在返回的响应体里面调用这个函数,并且把json当做参数传递.
    注意:(1).Jsonp不是一套新技术,只是聪明的程序员想出的一套方案
    (2)能不能用这套方案,要看服务器端代码怎么写,服务器端如果写了调用函数的代码,那么就能支持JSONP方案.

    如果是在JQuery中使用Ajax,则只需要在dataType属性中把json改为jsonp即可;
    img

    2、后端处理跨域方法:使用cors解决跨域问题,即跨域资源共享,设置响应头。
    <?php 
        $json = array("name"=>"jack","age"=>16);
        //代表告诉浏览器,我允许任意域名访问我这个接口
        //如果写一个*,代表所有域名都可以来访问我
        // header('Access-Control-Allow-Origin: *');
        //如果写的是指定域名,代表只有这个域名可以访问
        header('Access-Control-Allow-Origin: *');
        echo json_encode($json);
    ?>
    
    3、前端跨域方法:使用vue

    找到config文件下->index.js文件,修改propyTable中的target的值。

    proxyTable: {/api”: {
    target: “http://localhost:8080,
    changeOrigin: true,
    pathRewrite: {^/api’: ‘’
    }
    }
    }
    
    4、iframe嵌套通讯,postmessage

    HTML5引入了一个全新的API:跨文档通信 API(Cross-document messaging)。这个API为window对象新增了一个window.postMessage方法,允许跨窗口通信,不论这两个窗口是否同源。

    本文部分参考:https://blog.csdn.net/sinat_28296757/article/details/80771082

    展开全文
  • 什么跨域问题就是前端调用的后端接口不属于同一个域(域名或端口不同),就产生跨域问题,也就是说你的应用访问了该应用域名或端口之外的域名或端口。这都是同源策略在发挥作用。 同源策略 同源策略/SOP(Same ...
  • 出现跨域问题的原因及其解决方法

    千次阅读 2021-07-12 18:30:08
    1、出现跨域问题的原因: 同源策略 2、同源策略 三同 协议相同 域名相同 端口相同同源策略目的 保证用户信息安全,防止恶意网站窃取数据。同源策略是必须的,否则cookie可以共享。 3、同源策略目的 保证...
  • 跨域+springmvc http://blog.csdn.net/wabiaozia/article/details/52778335 ...跨域:ajax跨域,这应该是最全的解决方案了http://web.jobbole.com/93344/ 阮一峰 跨域资源共享 CORS 详解:http://...
  • 使用nginx进行服务器管理,经常遇到跨域问题,此文档就是解决此类问题; nginx跨域问题,解决多端口,多ip问题
  • 前端后端跨域问题

    2019-01-02 23:31:23
    跨域 原因:  浏览器限制  跨域(域名,端口,协议,ip不一样)  在使用XMLHTTPRequest对象发送HTTP请求时,遇到同源策略问题,域不同请求被浏览器拦截。
  • cesium跨域加载问题

    2019-02-20 17:29:16
    解决Cesium访问数据跨域问题,数据使用tomcat部署在服务器上。
  • 什么跨域问题?跨域解决问题

    千次阅读 多人点赞 2021-08-07 22:58:06
    为什么会出现跨域问题? 出于浏览器的同源策略限制.同源策略是一种约定,它是浏览器最核心也是最基本的安全功能,如果缺少了同源策略,则浏览器的正常的功能可能会受到影响,跨域收是Web是构建在同源策略基础上的,浏览器...
  • 什么跨域?怎么解决跨域问题

    千次阅读 2021-11-27 11:17:07
    同源策略 同源策略案例 什么跨域 跨域解决方法 1.ajax的jsonp 2.CORS方式 3.nginx 转发
  • 这里所说的域是指协议+域名+端口号,如果这三者都完全一致,则是同域请求,只要一个不同,就是跨域请求。 二、预检请求 浏览器发送请求时,判断是什么请求,如果是简单请求,直接执行服务端程序。如果是非简单...
  • 版权声明:本文博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。 本文链接:https://blog.csdn.net/wabiaozia/article/details/78771709 原文链接:...
  • 什么跨域跨域,指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器施加的安全限制。 所谓同源是指:域名,协议,端口均相同,不明白没关系,举个栗子: ...
  • 如何解决跨域以及为什么会产生跨域

    千次阅读 多人点赞 2021-04-08 11:26:50
    浏览器的同源策略指的就是协议,域名,端口,三者都相同,如果其中一个不同就属于跨域 跨域可能造成的报错 ajax在不同域名下的请求无法实现 常用的解决跨域的方法 1. JSONP跨域 JSONP(JSON with Padding: 填充式...
  • 框架完美解决了iframe之间的跨域通讯。底层技术采用window.name转换代理实现
  • tomcat解决跨域访问问题,具体配置如下: 1、修改tomcat下的Conf/web.xml文件,在该文件内容中新增以下配置,注意,若该web.xml中存在其它filter,则需要将该filter放在所有filter前面; <filter-name>...
  • 跨域问题出现原因和解决方案

    万次阅读 多人点赞 2017-06-09 11:09:38
    跨域是指a页面想获取b页面资源,如果a、b页面的协议、域名、端口、子域名不同,或是a页面ip地址,b页面域名地址,所进行的访问行动都是跨域的,而浏览器为了安全问题一般都限制了跨域访问,也就是不允许跨域...
  • 什么是跨域 现代浏览器处于安全考虑,都会去遵守一个叫做“同源策略”的约定,同源的意思是两个地址的协议、域名、端口号都相同的情况下,才叫同源...为什么禁止跨域 跨域访问造成很多安全问题,下面我们来看一...
  • 为什么 form 表单提交没有跨域问题

    千次阅读 2020-04-14 18:53:10
    所以form表单提交没有跨域问题,提交form表单到另外一个域名,原来页面是无法获取新页面的内容,或者说form提交后不需要返回,但是ajax是需要返回的。 而ajax是想要读取响应内容,浏览器是不允许你这么做的。 世界...
  • 跨域问题详解

    千次阅读 2022-03-11 10:40:42
    跨域的概念很简单,即当一个请求URL的协议、域名、端口三者之间任意一个与当前页面URL不同则视为跨域,而跨域问题产生的原因主要是由浏览器的“同源策略”限制导致的,是浏览器对JavaScript 施加的安全限制。...
  • ajax 重定向跨域问题

    千次阅读 2017-06-20 11:56:56
    此时出现跨域问题。 ajax调用浏览器组件发起的请求和浏览器直接发起的请求一定区别。  1)浏览器可以通过返回的http状态进行相应的操作,如访问一个页面,此页面重定向时,浏览器可以获取到重定向后的url...
  • 跨域问题的产生原因和相应的解决方式

    万次阅读 多人点赞 2017-11-28 11:07:12
    对于完全不同源的网站,目前三种方法,可以解决跨域窗口的通信问题。 片段识别符(fragment identifier) window.name 跨文档通信API(Cross-document messaging) 3.1 片段识别符 片段标识符(fragment ...
  • 为什么postman调接口不会跨域而浏览器

    万次阅读 多人点赞 2018-12-08 23:03:04
    为什么postman调接口不会跨域而浏览器? 都在说跨域为什么postman能访问接口,而浏览器就不行呢?这里需要理解什么是跨域跨域是指的当前资源访问其他资源时发起的http请求由于安全原因(由于同源策略,域名、...
  • 声明一个回调函数,其函数名(如fn)当做参数值,要传递给跨域请求数据的服务器,函数形参要获取目标数据(服务器返回的data)。 创建一个<script>标签,把那个跨域的API数据接口地址,赋值给script的src,还要在...
  • 什么跨域跨域解决方法

    万次阅读 多人点赞 2018-12-14 19:22:02
    一、为什么会出现跨域问题 出于浏览器的同源策略限制。同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建...
  • proxy代理解决跨域问题

    千次阅读 2021-05-10 11:47:17
    首先,了解一下什么是什么跨域为什么会出现跨域问题? 每个浏览器的URL由协议、域名、端口号;我们可以看到下面表格的一些测试URL: URL地址 协议 域名 端口号 http://exampleOne.com:8060 http example...
  • Axios解决跨域问题

    万次阅读 2021-09-13 22:35:31
    什么跨域 首先需要了解到浏览器的同源策略,同源策略是最核心也是最基本的安全功能,缺少同源策略浏览器的正常功能可能受到影响。同源策略阻止一个域的javascript脚本和另外一个域的能容进行交互。同源(即...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 254,614
精华内容 101,845
关键字:

为什么会有跨域问题