Ajax跨域问题

释放双眼,带上耳机,听听看~!

1.什么是跨域?

    跨域来源于JavaScript的\"同源策略\",即只有 协议+主机名+端口号 (如存在)相同,则允许相互访问。也就是说JavaScript只能访问和操作自己域下的资源,不能访问和操作其他域下的资源。跨域问题是  针对JS和ajax的,html本身没有跨域问题。
  查看浏览器开发者工具Console报错:
    Failed to load http://a.a.com:8080/A/FromServlet?userName=123: No \'Access-Control-Allow-Origin\' header is present on the requested resource. Origin \'http://b.b.com:8080\' is therefore not allowed   access.
    http://www.abc.com/a/b 调用 http://www.abc.com/d/c(非跨域)
    http://www.abc.com/a/b 调用 http://www.def.com/a/b (跨域:域名不一致)
    http://www.abc.com:8080/a/b 调用 http://www.abc.com:8081/d/c (跨域:端口不一致)
    http://www.abc.com/a/b 调用 https://www.abc.com/d/c (跨域:协议不同)
    请注意:localhost和127.0.0.1虽然都指向本机,但也属于跨域。
2.如何解决跨域?

  (1).响应头添加Header允许访问

  (2).jsonp 只支持get请求不支持post请求

  (3).httpClient内部转发

  (4).使用接口网关——nginx、springcloud zuul   (互联网公司常规解决方案)

3.解决方案

  解决方式1:响应头添加Header允许访问

    跨域资源共享(CORS)Cross-Origin Resource Sharing

    Ajax跨域问题

  

  解决方式2:jsonp 只支持get请求不支持post请求

 

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

            Ajax跨域问题

 

            Ajax跨域问题

  解决方式3:httpClient内部转发

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

         Ajax跨域问题

  解决方式4:使用nginx搭建企业级接口网关方式  

    www.a.a.com不能直接请求www.b.b.com的内容,可以通过nginx,根据同域名,但项目名不同进行区分。什么意思呢?这么说可能有点抽象。假设我们公司域名叫www.nginxtest.com

    当我们需要访问www.a.a.com通过www.nginxtest.com/A访问,并通过nginx转发到www.a.a.com

    当我们需要访问www.b.b.com通过www.nginxtest.com/B访问,并通过nginx转发到www.a.a.com

    我们访问公司的域名时,是\"同源\"的,只是项目名不同,此时项目名的作用只是为了区分,方便转发。如果你还不理解的话,先看看我是怎么进行配置的:

     Ajax跨域问题

    我们访问公司的域名时,是\"同源\"的,只是项目名不同,此时项目名的作用只是为了区分,方便转发。如果你还不理解的话,先看看我是怎么进行配置的:

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

 

  解决方式5:使用Spring Cloud zuul接口网关

    云环境中每个服务自己有跨域解决方案,而网关需要做最外层的跨域解决方案.如果服务已有跨域配置网关也有,会出现*多次配置问题。

    Ajax跨域问题

    使用ZUUL配置忽略头部信息

     Ajax跨域问题

    跨域配置

    Ajax跨域问题

 

给TA打赏
共{{data.count}}人
人已打赏
随笔日记

非对称加密算法-RSA算法

2020-11-9 5:14:01

随笔日记

【干货分享】大话团队的GIT分支策略进化史

2020-11-9 5:14:03

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索