现在越来越多的项目就算是一个管理后端也偏向于使用前后端分离的部署方式去做，为了顺应时代的潮流，一前后端分离就产生了跨域问题，所以许多同学把跨域和前后端分离项目联系在了一起，其实跨域产生的原因并不是前后端分离导致的，那我们一起来看一下，希望可以靠这一篇文章解答大家所有的跨域问题

一、跨域产生的条件

  • 使用xmlHttpRequest,即我们通常说的ajax请求
  • 浏览器做了这个事
  • 访问的域名不同，即访问的html页面是a域名下的，但内部js发送的ajax请求的目标地址却是b域名

以上三个条件缺一不可，尤其是第三个条件许多做移动端的同学可能都没有听过，因为移动端爽爽的用各种http请求狂发不同的域名，但是浏览器不允许我们这么做，为了一个词安全

二、如何解决跨域问题

解决跨域问题的根本就是要打破上述的三个限制中的任何一个，我们来看一下逐个击破的方式

JSONP方式

jsonp是打破第一重限制，用了XMLHttpRequest就跨域，那我不用这种方式了，我们怎么做的，来看一段jquery的带jsonp的ajax请求

$.ajax({

   type : "GET",

   url : "http://api.map.baidu.com/geocoder/v2/",

   data:"address=上海",

   dataType:"jsonp",

   jsonp:"callback",

   jsonpCallback:"showLocation",

   success : function(data){

       alert("成功");

   },

   error : function(data){

       alert("失败");

   }

});

看似用了ajax请求，其实内部完全不是那么回事，多了jsonp和jsonpCallback选项，它内部将代码翻译并把页面上的dom操作成这样

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

  </head>

  <body>

    <script type='text/javascript'>

      // 后端返回直接执行的方法，相当于执行这个方法，由于后端把返回的数据放在方法的参数里，所以这里能拿到res。

      window.showLocation = function (res) {

        console.log(res)

        //执行ajax回调

      }

    </script>

    <script src='http://api.map.baidu.com/geocoder/v2/?address=上海&callback=showLocation' type='text/javascript'></script>

  </body>

</html>

这个时候，html页面的script src标签回去访问api.map.baidu.com的服务端，由于script，img这种标签浏览器是不受xmlhttprequest限制的，可以随意访问，这个时候对应的后端代码取得address参数，最后根据双方约定好的callback参数，返回一个被包装后的json，即

showLocation({

    status: 0,

    result: {

        location: {

            lng: 121.4219317908279,

            lat: 31.361653367912695

        },

        precise: 1,

        confidence: 80,

        comprehension: 99,

        level: "道路"

    }

})

然后浏览器直接执行了对应的这个showLocation()… 等等，这个不就相当于执行了我们上面定义的window.showLocation方法并且传入了我们需要的json返回吗，那我们的ajax success方法里就可以得到这个返回类型了，并且没有跨域，是不是很精妙。

CORS

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）跨域资源共享 CORS 详解。这个玩样用于“破解”掉浏览器的限制，说是破解其实也是浏览器认识到了一些头部就放行了的意思，需要在http的response内多设置几个头部

  • Access-Control-Allow-Origin:* 表明允许所有的origin（浏览器的html页面路径）访问，而并非是同源的origin
  • Access-Control-Request-Method:* 表明允许所有的http request头，访问，因为浏览器在触发如下几个场景会在发送真正的数据前发送options这样的预检请求检测，一旦预检通过后才会发送真正的get或post数据请求，这个时候我们按照cors的设置就需要允许对应的method访问，触发的几种情况包括
    1:请求的方法不是GET/HEAD/POST
    2:POST请求的Content-Type并非application/x-www-form-urlencoded, multipart/form-data, 或text/plain
    3:请求设置了自定义的header字段等
  • Access-Control-Allow-Headers:* 设置所有header均可以被允许，这个配置联通上述的request method options检测一起使用，可以在需要自定义header的场景下使用
  • Access-Control-Allow-Credentials：true 这个参数只有当需要跨域使用cookie传递时才需要设置为true，并且需要前端ajax配置使用xhrField:{withCredential:true}时才能传递cookie，另外safari和最新版本的chrome浏览器还需要在设置内放开对应限制，可参考我的秒杀课程,当这个参数被设置成true时候Access-Control-Allow-Origin就不能设置为*，否则就变成任何origin域都能允许传递cookie了，可将其调整为前端origin字段传什么我就用什么

若你使用的是nginx反向代理，则可以直接在nginx反向代理上配置

location /{

    proxy_pass http://backendserver;

    add_header Access-Control-Allow-Methods *;

    add_header Access-Control-Allow-Credentials true;

    add_header Access-Control-Allow-Origin $http_origin;

    add_header Access-Control-Allow-Headers *;

}

代理法

打破不同源的限制，我只要让它同源就可以了，比如要我的静态页面是 http://a.com/index.html 动态ajax请求访问的是http://b.com/api/***

我只需要将对应的服务部署在不同的机器上，然后使用一个公共的c.com的域名作为nginx反向代理的入口域名，在将静态服务和动态服务分别挂在后面的被代理局域网服务器内，修改配置

server{

    listen:80;

    server_name: c.com;

    #静态资源

    location /{

        proxy_pass http://localhost:8080/;

    }

    #ajax动态请求

    location /api{

        proxy_pass http://localhost:8081/;

    }

}

这样就变成同源了

写在最后

  • 第一：看完点赞，感谢您对作者的认可；
  • ...
  • 第二：随手转发，分享知识，让更多人学习到；
  • ...
  • 第三：记得点关注，每天更新的！！！
  • ...

阿里P7架构师是如何解决跨域问题的！你有遇到吗？的更多相关文章

  1. 转头条：阿里p7架构师:三年经验应该具备什么样的技能？

    问:工作中,有时候实现一个功能,会去看有没有现成的轮子可用.对于重复造轮子与改造轮子有什么看法? 答:一定会的,其实这也是一个提高技术能力的方法,比如今天想做个日期转换的功能,JDK8有日期的新特性就 ...

  2. 阿里P7架构师详解微服务链路追踪原理

    背景介绍 在微服务横行的时代,服务化思维逐渐成为了程序员的基本思维模式,但是,由于绝大部分项目只是一味地增加服务,并没有对其妥善管理,当接口出现问题时,很难从错综复杂的服务调用网络中找到问题根源,从而 ...

  3. 详解阿里P7架构师是怎么在Spring中实现事务暂停

    摘要 Spring框架是一个流行的基于轻量级控制反转容器的Java/J2EE应用框架,尤其在数据访问和事务管理方面的能力是众所周知的.Spring的声明性事务分离可以应用到任何POJO目标对象,并且包 ...

  4. 深入浅出！阿里P7架构师带你分析ArrayList集合源码，建议是先收藏再看！

    ArrayList简介 ArrayList 是 Java 集合框架中比较常用的数据结构了.ArrayList是可以动态增长和缩减的索引序列,内部封装了一个动态再分配的Object[]数组 这里我们可以 ...

  5. 阿里P8架构师深度概述分布式架构

    简介 作为一名架构师,我们要专业,要能看懂代码,及时光着臂膀去机房,也能独挡一面!及时同事搞不定问题,或者撂挑子,你也能给老大一个坚定的眼神:不怕,有我在!还能在会议室上滔滔不绝,如若无人,让不懂技术 ...

  6. 阿里P8架构师谈：数据库分库分表、读写分离的原理实现，使用场景

    本文转载自:阿里P8架构师谈:数据库分库分表.读写分离的原理实现,使用场景 为什么要分库分表和读写分离? 类似淘宝网这样的网站,海量数据的存储和访问成为了系统设计的瓶颈问题,日益增长的业务数据,无疑对 ...

  7. 阿里P8架构师谈：MySQL慢查询优化、索引优化、以及表等优化总结

    更多内容:https://www.toutiao.com/i6599796228886626829/?tt_from=weixin&utm_campaign=client_share& ...

  8. Java开发不懂Docker，学尽Java也枉然，阿里P8架构师手把手带你玩转Docker实战

    转: Java开发不懂Docker,学尽Java也枉然,阿里P8架构师手把手带你玩转Docker实战 Docker简介 Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一 ...

  9. 使用nginx解决跨域问题（flask为例）

    背景 我们单位的架构是在api和js之间架构一个中间层(python编写),以实现后端渲染,登录状态判定,跨域转发api等功能.但是这样一个中间会使前端工程师的工作量乘上两倍,原本js可以直接ajax ...

随机推荐

  1. 超文本css样式换行

    之前有关于LODOP中纯文本换行的相关博文:Lodop纯文本英文-等符号自动换行问题纯文本的遇到不拆分的单词的时候,可以通过LODOP 语句设置允许标点溢出,且英文单词拆开.超文本需要通过css样式控 ...

  2. 【opencv基础-VxWorks】话说图像格式转换-COLOR_YUV2BGR_YUY2

    前言 基于Vxworks的WindRiver获取摄像头图像进行处理,需要先进行转换,对于转换格式博主有点疑问.本文对此作出解释,若有错误,请交流指正. README.md The video came ...

  3. git的使用学习（三）时光机穿梭

    1.版本回退 现在,你已经学会了修改文件,然后把修改提交到Git版本库,现在,再练习一次,修改readme.txt文件如下: Git is a distributed version control ...

  4. 【C/C++开发】C语言实现函数可变参数

    函数原型: int printf(const char *format[,argument]...)        返 回 值: 成功则返回实际输出的字符数,失败返回-1.  函数说明:        ...

  5. ubuntu18.04下安装gitlab

    1.安装并配置必要的依赖关系 sudo apt-get update sudo apt-get install -y curl openssh-server ca-certificates 接下来,安 ...

  6. 2019.10.28 IDEA入门指南(很多人问补充一篇)

    Idea快速入门指南 1.安装 1.1.安装 我们使用的是最新的2017.3.4版本: 双击打开, 选择一个目录,最好不要中文和空格: 然后选择桌面快捷方式,请选择64位: 然后选择安装: 开始安装: ...

  7. 使用派生镜像(qcow2)

    当创建的虚拟机越来越多,并且你发现好多虚拟机都是同一个操作系统,它们的区别就是安装的软件不大一样,那么你肯定会希望把他们公共的部分提取出来,只保存那些与公共部分不同的东西,这样镜像大小下去了,空间变多 ...

  8. rsync同步本地和服务器之间的文件

    同步本地文件到服务器 rsync -zvrtopg --progress --delete test -e 'ssh -p 6665' yueyao@172.16.0.99:/media/sdb/us ...

  9. 035 Android 广播(BroadCastReceiver)

    1.介绍 2.实现方法 3.注册广播 (1)静态广播 在AndroidManifest.xml文件中注册广播 <intent-filter>为过滤器 <receiver androi ...

  10. Linux02 cd命令以及绝对路径和相对路径

    一.cd 这是一个非常基本,也是大家常用的命令,用于切换当前目录,他的参数就是要切换的目录的路径,可以是绝对路径,也可以是相对路径. cd /home/keshengtao/ 绝对路径 cd ./pa ...