• ajax跨域问题详解


    什么是跨域

      前台调用后台接口的时候 ,如果请求接口和当前服务不是同一个域,则发生了跨域

      如:存在两个服务,localhost:8080, localhost:8081

      当前页面在服务8080端口上,但是其内部的某个方法调用了8081端口的服务,由于两个服务不在同一个域上,则发生了跨域请求

      跨域请求的请求头中多一个Origin字段

      何为同一个域:协议,域名,端口都一致。如上 http://localhost:8080就是一个域, http://localhost:8081是另外一个域

      总言之就是一个域上的服务向另一个域的服务接口发送了请求。简单理解的话就是一个tomcat上的应用向另一个tomcat中的应用发送了请求(主要还是不同域)。

    为什么发生跨域

      浏览器限制

        后端本身是没有跨域限制的,所以发生跨域时后端返回的依然是200,(后台正常处理请求)

        浏览器测出于安全限制,会对跨域请求做检查,虽然后端正常应答,但是浏览器测依然会报错,导致请求最终为失败

      跨域

        协议、域名、端口三要素,任何一个不同,都会产生跨域

      XHR(XMLHttpRequest)请求(ajax请求)

        如果发出的不是xhr请求,就算有跨域问题也不会报错

      上述三个条件同时满足,才会产生跨域安全问题。

    解决办法

      1.浏览器限制

       通过修改浏览器启动参数,去除安全检查,则会打破跨域问题的三要素

        启动参数: --disable-web-security

      2.xhr请求(jsonp解决跨域) 

        jsonp是一种前后端的约定,解析的是js代码

        ajax请求中设置dataType: jsonp即可使用

        jsonp通过创建一个script,在script中把请求发出去的,用完之后script销毁

        普通ajax请求的type是xhr,jsonp请求的type是script

        普通ajax请求的返回类型是json对象(application/json),jsonp请求返回类型是js脚本(application/javascript)

        实现方法:

          jsonp请求后有一个callback参数(eg: http://a.com?callback=xxx),这里的callback是前后端的一种约定,后端发送有callback参数后就知道是jsonp请求,

          然后就把返回的数据从json封装成js函数,函数名就是请求入参中callback的值,前端收到应答后,从对应的callback函数中取回里面的json数据

          备注:callback字段名可以改,只要前后端达成一致即可。

        jsonp的弊端

          服务端需要改动代码以支持(将json的数据转换为js函数返回)

          只支持get方法(script方法只能用get方法请求),即使指定post,发送的也是get

          发送的不是xhr请求,所以不具有ajax的特性

        总结:jsonp就是前后端的一种约定,使得前端发送的数据类型不是xhr,后端返回数据也不是json。打破了跨域请求三要素。

      3.被调用方解决跨域

          指定允许的域(*号表示允许所有,下同),即来自这个域的请求不算跨域(这个字段是要写到应答头里给浏览器解析的)

            resp.addHeader("Access-Control-Allow-Origin", "http://localhost:8081");  

          指定允许的http方法

            resp.addHeader("Access-Control-Allow-Methods", "GET");

          指定允许跨域时携带Origin端的cookie

            resp.addHeader("Access-Control-Allow-Credentials", "true");

          指定允许相应的请求头

            resp.addHeader("Access-Control-Allow-Headers", "Content-Type,X-My-Header");

          指定允许缓存预检命令

            resp.addHeader("Access-Control-Max-Age", "3600");

          简单请求

            方法为 get、head、post

            请求头里面无自定义请求头

            Content-Type为以下几种: text/plain、mul.tipart/form-data、application/x-www-form-urlencode

            同时满足上面三个条件的为简单请求

          复杂请求

            方法为put、delete的ajax请求

            发送json格式的ajax请求

            带自定义请求头的请求

            满足上面任何一条都是非简单请求

          预检命令

            对于复杂请求,发生跨域时,实际浏览器会先发出一个OPTIONS预检命令给对应的服务器,然后才实际发送复杂请求

            可以在请求头中设置Access-Control-Max-Age来缓存预检命令的结果

            对于简单请求,浏览器直接发送请求,然后判断应答是否满足跨域请求,是否正常处理

            

      4.调用方解决跨域

        使用反向代理模式,直接调用nginx或者apache,其内部做代理处理,所以调用者识别不到跨域问题。

          

  • 相关阅读:
    可视化工具连接mysql报1862【mysql修改登录密码】
    Java面试常被问到的题目+解答
    MyBatis启动:MapperStatement创建
    JavaScript Array(数组)对象
    分布式与集群的区别是什么?
    【触发器】MySQL触发器使用详解
    c++冒泡排序的模板函数设计
    c/c++性能优化--- cache优化的一点杂谈
    BZOJ 3181([Coci2012]BROJ-最小质因子为p的第k小素数)
    POJ 1026 Cipher
  • 原文地址:https://www.cnblogs.com/gc65/p/11449144.html
Copyright © 2020-2023  润新知