精华内容
下载资源
问答
  • 前端常用跨域解决方案 跨域是浏览器为了安全而做出的限制策略。 浏览器请求必须遵循同源策略:同域名、同端口、同协议。 【三种解决方式】: 1、CORS跨域; 2、JSONP跨域; 3、代理跨域。 一.CORS跨域:(主要修改...

    前端常用的跨域解决方案

    跨域是浏览器为了安全而做出的限制策略。
    浏览器请求必须遵循同源策略:同域名、同端口、同协议。
    【三种解决方式】:
    1、CORS跨域; 2、JSONP跨域; 3、代理跨域。(最安排的,别人看不到你原接口得地址)

    一.CORS跨域:(主要修改后端代码实现)
    服务端设置,前端直接调用(说明:后台允许前端某个站点进行访问)

    Response Headers中:
    Access-Control-Allow-Credentials:true 如后端取不到你的Cookie,前端发请求时一定要设置这个选项为true。
    Access-Control-Allow-Origin:http://localhost:8080 此设置可允许前端跨域。

    二.jsonp跨域:前台适配,后台配合

    1. npm i jsonp --save-dev 下载jsonp
    2. 导入 import jsonp from ‘jsonp’
    <script>
    import jsonp from 'jsonp';
    export default {
      data(){
        return{
          data:''
        }
      },
      mounted()
      {
        let url = 'https://www.imooc.com/search/hotwords';
        jsonp(url,(err,res)=>{
          let result = res;//res接收接口信息
          this.data = result
        })
      }
    }
    </script>
    

    --------------------------------------------------------------------------------------------------
    需要注意的是:

    1. cors请求,默认是任何人都可以请求,如果后端做了设置就可以做到只允许一些站点可以访问
    2. jsonp,是没有任何限制的请求接口的一段js代码,通过script标签本身就可以跨域请求的特性的一种方式。
    3. jsonp严格来说不是发送xmlhttpRequest请求,而是加载一个js脚本,服务器会响应,把信息返回给callback参数(res),来实现回调
    4. 所以说cors调用的接口在控制台 —network —XHR 可以找到 而jsonp调用的接口在 控制台 --network —JS中可以找到

    三.接口代理:用过修改nginx服务器配置来实现(前端修改,后端不动)

    1. 创建vue.config.js 配置webpack
      vue.config.js:
    module.exports = {
        devServer: {
            host: 'localhost', //主机名
            port: 8080, //用于修改端口
            proxy: {
                '/search': {
                    target: 'https://www.imooc.com',
                    changeOrigin: true, //主机头
                }
            }
        }
    }
    
      mounted()
      {
        let url = '/search/hotwords';
        jsonp(url,(err,res)=>{
          let result = res;
          this.data = result
        })
      }
    

    原接口地址:https://www.imooc.com//search/hotwords
    我们进行上面代码进行代理之后,发现接口地址变为:
    在这里插入图片描述
    表面访问的是自己域名下的/search/xxx接口,实际是访问mooc网的/search/xxx接口,好像这么接口是我们自己的,这样实现了跨域。

    具体怎么实现的呢:
    1.

     proxy: {
                '/search': {
                    target: 'https://www.imooc.com',
                    changeOrigin: true, //主机头
                }
            }
    

    这段代码,当访问到的接口地址找到了/search,然后进行拦截,就会执行target,内部就会访问慕课网的接口(转发到慕课网上去)

      mounted()
      {
        let url = '/search/hotwords';
        jsonp(url,(err,res)=>{
          let result = res;
          this.data = result
        })
      }
    

    由于访问到了慕课网的接口,所以url地址直接写'/search/hotwords'即可,不用前面加慕课网的地址

        devServer: {
            host: 'localhost', //主机名
            port: 8080, //用于修改端口
    

    这是代理者,主机名和端口名,所以呈现出来的效果是:
    在这里插入图片描述
    -----------------------------------------------------------------------------------------------------

    扩展:假设慕课网有很多个接口 /a /b 。。。。 如果每个接口都进行代理拦截,很麻烦,我们可以建一个虚拟地址/api 来进行接口统一,由于虚拟的,实际上不访问/api 。要想实现虚拟,必须利用proxy中的pathRewrite,将其设置为空

    module.exports = {
        devServer: {
            host: 'localhost', //主机名
            port: 8080, //用于修改端口
            proxy: {
                '/api': {
                    target: 'https://www.imooc.com',
                    changeOrigin: true, //主机头
                    pathRewrite: {
                        '/api': ''//创建虚拟地址,当访问/api是想当于访问‘’,达到虚拟的效果
                    }
                }
            }
        }
    }
    
    mounted()
      {
        let url = '/api/search/hotwords';
        jsonp(url,(err,res)=>{
          let result = res;
          this.data = result
        })
      }
    

    在这里插入图片描述

    展开全文
  • 解决跨域常用方案

    2021-02-24 15:15:12
    一、 什么是跨域跨域是指一个域下的文档或脚本试图去请求另一个域下的资源 二、什么是同源策略? 同源策略/SOP(Same origin policy...三、跨域解决方案 1、 通过jsonp跨域 2、 document.domain + iframe跨域 3、 lo

    一、 什么是跨域?

    跨域是指一个域下的文档或脚本试图去请求另一个域下的资源

    二、什么是同源策略?

    同源策略/SOP(Same origin policy)是一种约定,由Netscape公司1995年引入浏览器,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS、CSFR等攻击所谓同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个ip地址,也非同源。

    三、跨域解决方案

    1、 通过jsonp跨域
    2、 document.domain + iframe跨域
    3、 location.hash + iframe
    4、 window.name + iframe跨域
    5、 postMessage跨域
    6、 跨域资源共享(CORS)
    7、 nginx代理跨域
    8、 nodejs中间件代理跨域
    9、 WebSocket协议跨域

    四、常用跨域解析(都需要服务端配合)

    1. 通过jsonp跨域

    响应头添加Header允许访问
    跨域资源共享(CORS)Cross-Origin Resource Sharing

    这个跨域访问的解决方案的安全基础是基于"JavaScript无法控制该HTTP头"

    它需要通过目标域返回的HTTP头来授权是否允许跨域访问。

    response.addHeader(‘Access-Control-Allow-Origin:*’);//允许所有来源访问
    response.addHeader(‘Access-Control-Allow-Method:POST,GET’);//允许访问的方式

    1. jsonp 只支持get请求不支持post请求

    jsonp 跨域的原理就是用的动态加载 script 标签的src ,所以我们只能把参数通过url的方式传递,所以jsonp的 type类型只能是get !

    用法:①dataType改为jsonp
    ②jsonp : “jsonpCallback”————发送到后端实际为http://a.a.com/a/FromServlet?userName=644064&jsonpCallback=jQueryxxx
    ③后端获取get请求中的jsonpCallback
    ④构造回调结构

    $.ajax({
       type : "GET",
       async : false,
       url : "http://a.a.com/a/FromServlet?userName=644064",
       dataType : "jsonp",//数据类型为jsonp
       jsonp : "jsonpCallback",//服务端用于接收callback调用的function名的参数
       success : function(data) {
       alert(data["userName"]);
    },
    error : function() {
       alert('fail');
       }
    });
    

    其实jquery 内部会转化成

    http://192.168.10.46/demo/test.jsp?jsonpCallback=jQuery202003573935762227615_1402643146875&action=aaron

    然后动态加载

    然后后端就会执行jsonpCallback(传递参数 ),把数据通过实参的形式发送出去。

    使用JSONP 模式来请求数据的整个流程:客户端发送一个请求,规定一个可执行的函数名(这里就是 jQuery做了封装的处理,自动帮你生成回调函数并把数据取出来供success属性方法来调用,而不是传递的一个回调句柄),服务器端接受了这个 jsonpCallback函数名,然后把数据通过实参的形式发送出去

    1. httpClient内部转发
      实现原理很简单,若想在B站点中通过Ajax访问A站点获取结果,固然有ajax跨域问题,但在B站点中访问B站点获取结果,不存在跨域问题,这种方式实际上是在B站点中ajax请求访问B站点的HttpClient,再通过HttpClient转发请求获取A站点的数据结果。但这种方式产生了两次请求,效率低,但内部请求,抓包工具无法分析,安全

    2. 使用nginx搭建企业级接口网关方式

    我们访问以www.nginxtest.com开头且端口为80的网址,nginx将会进行拦截匹配,若项目名为A,则分发到a.a.com:81。实际上就是通过"同源"的域名,不同的项目名进行区分,通过nginx拦截匹配,转发到对应的网址。整个过程,两次请求,第一次请求nginx服务器,第二次nginx服务器通过拦截匹配分发到对应的网址。

    展开全文
  • java后端跨域问题常用解决方案

    千次阅读 2020-10-25 13:01:47
    跨域问题是经常遇到的,说到底,跨域是浏览器的一种安全自我保护机制的体现,即域的同源策略的保护,关于跨域解决,网上参考的资料挺多,比如前端解决手段、后端解决办法、网关层的方案等,下面从java后端几种常用的...

    前言

    在项目开发中,跨域问题是经常遇到的,说到底,跨域是浏览器的一种安全自我保护机制的体现,即域的同源策略的保护,关于跨域解决,网上参考的资料挺多,比如前端解决手段、后端解决办法、网关层的方案等,下面从java后端几种常用的解决方式简单总结下

    案例前导

    首先我们来看一个简单的跨域问题,我们在一个html页面模拟发送一个ajax请求,通过后端接口请求数据

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>跨域测试</title>
    
        <script src="../../lib/vue.js"></script>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    </head>
    <body>
        
        <div id="app">
            <ul v-for="city in hotCitys">
               <li>{{city}}</li>
            </ul>
        </div>
    
        <script>
             const vm = new Vue({
                el: "#app",
                data: {
                    hotCitys:["北京","上海","深圳","广州","天津"]
                },
                created:function(){
                    var _this = this
                    axios.get("http://localhost:7747/getCitys").then(
                        function (response) {
                            console.log(response.data)
                            if(response){
                                _this.hotCitys = response.data
                            }
                        }
                    ).catch(function (error) {
                        console.log(error)
                    })
                }
    
            })
        </script>
    
    </body>
    </html>
    

    后端接口

    @RestController
    public class CityController {
    
        @GetMapping("/getCitys")
        public List<String> getCitys(){
            List<String> citys = Arrays.asList("北京","上海","广州","深圳","杭州");
            return citys;
        }
    
    }
    

    代码非常简单,相信有一点前端基础的都能看得懂,这时候的问题就出现了,相信这个报错大家一眼就能看出跨域的问题所在

    在这里插入图片描述

    解决方案1,使用注解@CrossOrigin

    使用@CrossOrigin注解可以轻松解决上面的跨域问题,适用于整体对项目的跨域问题不是很敏感的项目或者是在开发调试阶段使用,@CrossOrigin注解可以放在方法或者类上均可使用

    当我们加上@CrossOrigin注解之后,再次刷新页面时,可以看到,上面报出的跨域问题就消失了

    	@GetMapping("/getCitys")
        @CrossOrigin
        public List<String> getCitys(){
            List<String> citys = Arrays.asList("北京","上海","广州","深圳","杭州");
            return citys;
        }
    

    在这里插入图片描述

    解决方案2,使用CorsFilter

    如果在springboot项目中,配置一个CorsFilter的bean并注册到spring容器中即可,可参考如下配置

    @Configuration
    public class CrosConfig {
    
        @Bean
        public CorsFilter corsFilter() {
            CorsConfiguration config = new CorsConfiguration();
            //是否允许请求带有验证信息,比如token之类的
            config.setAllowCredentials(true);
            //允许访问的客户端域名
            config.addAllowedOrigin("*");
            //允许客户端请求时携带header信息
            config.addAllowedHeader("*");
            //允许请求时的方法类型
            config.addAllowedMethod("*");
            UrlBasedCorsConfigurationSource urlConfig = new UrlBasedCorsConfigurationSource();
            urlConfig.registerCorsConfiguration("/**", config);
            return new CorsFilter(urlConfig);
        }
    }
    

    这时,我们可以去掉上面的那个@CrossOrigin的注解,启动项目再次刷新页面,可以看到仍然可以达到解决跨域的目的
    在这里插入图片描述

    解决方案3,使用nginx代理

    nginx层属于网关层,即可以通过在nginx中进行相关的配置达到解决跨域的目的,下面我们在本地的nginx中进行简单的配置

    为了更接近模拟开发中的效果,首先简单修改下前端页面的请求地址,即将请求的前缀换成域名,如下:

    <script>
             const vm = new Vue({
                el: "#app",
                data: {
                    hotCitys:["北京","上海","深圳","广州","天津"]
                },
                created:function(){
                    var _this = this
                    axios.get("http://www.congge.com/city/getCitys").then(
                        function (response) {
                            console.log(response.data)
                            if(response){
                                _this.hotCitys = response.data
                            }
                        }
                    ).catch(function (error) {
                        console.log(error)
                    })
                }
    
            })
        </script>
    

    然后再在nginx.conf中进行简单的配置

    server {
    		#监听的请求server地址,也可以是localhost
            server_name www.congge.com;
    		
    		#允许跨域请求的域
            add_header 'Access-Control-Allow-Origin' *;
            #允许带上cookie请求
            add_header 'Access-Control-Allow-Allow-Credentials' 'true';
            #允许请求的方法 GET/POST/PUT 等
            add_header 'Access-Control-Allow-Methods' *;
            #允许请求的header
            add_header 'Access-Control-Allow-Headers' *;
    
            location /city/ {
                proxy_pass http://127.0.0.1:8048/;
            }
    }
    

    当然本地为了测试效果,需要在etc文件中简单配置下域名的映射:
    在这里插入图片描述

    这样调整之后,启动nginx,我们再次刷新页面,可以看到依然可以正常请求到后端的接口
    在这里插入图片描述

    当然,在某些情况下,对于跨域问题,从前端出发,还可以采用jsonp的方式,后端项目如果是springcloud的,可以考虑在网关除zuul或gateway中配合CorsFilter一起使用,限于篇幅这里就不再继续深入了,有兴趣的同学可以继续研究

    本篇主要讲述了3种简单的处理java后端跨域问题常用解决方案,开发过程可以根据自己的实际情况进行合理的选取,本篇到此结束,最后感谢观看!

    展开全文
  • 浏览器出于安全问题的考虑,采用了同源策略:不能获取其他域名(包括端口)下面的限制 ,通常指的是运行web的服务器和请求...常用解决方案: CORS: 1. 简单请求: 浏览器默认在请求头信息中增加Origin字段,跨域...

    浏览器出于安全问题的考虑,采用了同源策略:不能获取其他域名(包括端口)下面资源的限制 。

    (1) Cookie、LocalStorage 和 IndexDB 无法读取。

    (2) DOM 无法获得。

    (3) AJAX 请求不能发送。(比如运行在127.0.0.1:80的web服务想要通过ajax来获取127.0.0.1:8090的数据)

    这里讨论的是第三条,ajax请求只能发送给同源的网址。

    实际上,跨域请求的检查和拦截者是浏览器。

     

    常用解决方案:

    • CORS:

    1. 简单请求:

     
    • Content-Type 的值仅限于下列三者之一:
      • text/plain
      • multipart/form-data
      • application/x-www-form-urlencoded

    浏览器默认在请求头信息中增加Origin字段,跨域后的服务器根据这个值决定是否同意这次请求:

    服务器不同意:返回一个正常的HTTP回应,不包含Access-Control-Allow-Origin(注意:状态码可能依旧为200);

    服务器同意:在返回请求头中加入Access-Control-Allow-Origin,其他几个相关的头字段:

    Access-Control-Allow-Origin: http://XXX (要么是Origin字段的值,要么是*表示接收任意域名)
    Access-Control-Allow-Credentials: true
    Access-Control-Expose-Headers: FooBar

    请求带Cookies和HTTP认证信息需要:

    前端:ajax请求时设置XMLHttpRequest对象的withCredentials属性为true;

    后端:返回请求头中添加 Access-Control-Allow-Credentials: true

    2. 预检请求

    预检请求为非简单请求(比如使用目前最常用的conent-Type:application/json)。浏览器在检测到请求不属于简单请求,首先使用options方法发起一个预检请求到服务器,获知服务器是否允许该请求。预检请求一般包含这三个请求头:

    发送options请求:

    Origin: http://XXXX.com

    Access-Control-Request-Method: PUT等

    Access-Control-Request-Headers: X-XXX-Header

    服务器允许时的返回:

    Access-Control-Allow-Origin: http://XXX.com

    Access-Control-Allow-Methods: GET, POST, PUT

    Access-Control-Allow-Headers: X-Custom-Header

    服务器拒绝时的返回: 会返回一个正常的HTTP回应,但是没有任何CORS相关的头信息字段

    注意:对于附带身份凭证的请求,服务器不得设置 Access-Control-Allow-Origin 的值为“*”。即:发送请求时的XMLHttpRequest对象的withCredentials属性设为true,浏览器期望在请求时携带cookie信息,这时候服务器如果Access-Control-Allow-Origin:*,也被判断为预检请求失败。参考下图:

    • JSONP方法

    将请求url动态拼接成引用外部js文件的方式。

    
    <script>
        function fn(data) {
            alert(data);
        }
    </script>
    <!--当作js文件来加载。
    通常:在2.txt中常调用回调函数:fn([...]),
        或在src中定义获取数据后的回调:src="http:...&calllback=fn"-->
    <script src="http://127.0.0.1:8887/2.txt">
      // 以下的写法会报错,抛弃
      // var xhr = new XMLHttpRequest()
      // xhr.open('GET', 'http://127.0.0.1:8887/2.txt')
      // xhr.send()
    </script>
    

     

    • webSocket方法

    WebSocket是一种通信协议,不实行同源策略。

    • 设置代理服务器

    比如通过webpack-dev-server(使用的是http-proxy-middleware)实现跨域代理,参考这篇:https://webpack.docschina.org/configuration/dev-server/#devserverproxy

    • 浏览器关闭同源策略

    如果是开发调试环境,还可以采用关闭chrome浏览器同源策略的方式来暂时方便开发(这时候浏览器不检查是否跨域,也不会发送预检请求)。

    方法:在命令行打开浏览器时,浏览器地址后加上后缀:

     “--disable-web-security --user-data-dir"

    或在快捷方式中右键属性,目标框中chrome浏览器的目录后,加以上后缀且以空格隔开,如下图:

     以后打开的chrome浏览器会弹出以下提示,忽略即可

     

    参考自:

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

    https://www.cnblogs.com/LO-ME/p/7515393.html

    https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS

    展开全文
  • 跨域,相信大家无论是在工作中还是在面试中经常遇到这个问题,常常在网上看到别人所整理的一些方法,看似知道是怎么回事,但如果没有动手实践过,总觉得自己没有真正的掌握,在这里,通过自己认真思考整理一些常用的...
  • 目录一、背景二、前端解决跨域方案1、JSONP原理优点缺点2、CORS(跨域资源共享)原理实现1)简单请求2)非简单请求优点缺点3、nodejs中间件代理跨域原理实现优点缺点4、Nginx反向代理原理实现1)本地电脑windows下...
  • 一、什么是跨域请求?...原理是Ajax存在跨域问题,但是script标签不存在这类问题,所以利用script标签可解决跨域问题。注意,JSONP只支持get方式,有一定的局限性和安全问题。实例代码如下: 这是html页面,由于loca
  • 什么是跨域 跨域大家都知道,不同地址,不同端口,不同级别,不同协议都会构成跨域。例如:about.haorooms.com和www.haorooms.com都会构成跨域。总结起来只要协议、域名、端口有任何一个不同,都被当作是不同的域。 ...
  • 跨域常用解决方案

    2018-09-13 15:02:00
    2019独角兽企业重金招聘Python工程师标准>>> ...
  • 解决跨域的方法千千万,主要是我们要根据自己的实际情况来选择对应的方案,一下简单说说集中常常遇到的跨域情景下的解决方案。 主域名下的不同子域名的跨域 首先我们如果只是想要实现主域名下的不同子域名的跨域操作...
  • 解决跨域问题的方案

    2019-08-04 21:40:23
    解决跨域问题的方案 目前比较常用的跨域解决方案有3种: Jsonp 最早的解决方案,利用script标签可以跨域的原理实现。 限制: 需要服务的支持 只能发起GET请求 nginx反向代理 思路是:利用nginx反向代理把跨域为不...
  • CORS即“跨域资源共享”,这是一种最常用跨域实现方式,一般需要后端人员在处理请求数据的时候,添加允许跨域的相关请求头信息。大致思路是这样的:首先获取请求对象的信息,比如Origin字段,通过预先配置的参数...
  • 二: 跨域资源共享(CORS) 只需在后端设置请求头: // 如果需要http请求中带上cookie,需要前后端都设置credentials,且后端设置指定的origin 'Access-Control-Allow-Origin': '*' 'Access-Control-Allow-...

空空如也

空空如也

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

常用解决跨域的方案