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

一、跨域产生的条件

  • 使用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. 把github代码自动部署到服务器

    一.参考文献 https://developer.github.com/webhooks/ https://docs.gitlab.com/ee/user/project/integrations/w ...

  2. Python3 IO编程之序列化

    在程序运行的过程中,所有变量都是在内存中,比如定义一个dict >>> d=dict(name='Box',age=20,score=11) 可以随时修改变量,比如把'name'改成 ...

  3. keepalived+lvs tcp check 引起的后端服务报Connection reset by peer

    方法一: 取消LVS方式进行tcp转发,进而改为http方式反向代理,问题即可解决. 当然,这是在业务允许使用http的情况下,如果必须使用tcp协议,那就得使用下面的方法了. 方法二: 修改keep ...

  4. 编译Cython代码时遇到的问题: fatal error LNK1112: module machine type 'x64' conflicts with target machine type 'X86'

    使用python setup.py build_ext --inplace命令编译cython代码, 出现以下错误: Compiling cython_example.pyx because it c ...

  5. Qt qml的软件架构设计

    google: qt qml application architecture 有很多资源. 1 https://www.ics.com/blog/multilayered-architecture- ...

  6. es操作手册

    0 _search查询数据时可以指定多个index和type GET /index1,index2/type1,type2/_search GET /_all/type1/_search 相当于查询全 ...

  7. （3）Spring Boot日志

    文章目录 选择哪一种日志框架 日志的使用 Spring Boot 日志使用 选择哪一种日志框架 市面上日志门面有: JCL(Jakart Commons Logging) .SLF4J(Simple ...

  8. php数组与数据栈相关函数

    php数组可以用栈的角度来操作,这其中包含了如下函数,array_pop(),array_push,array_shift(),array_unshift(). array_pop()函数 将数组的最 ...

  9. Python re模块学习

    这是re模块与正则的结合 re模块提供的函数 1.match  尝试在字符串的开头应用该模式,返回匹配对象,如果没有找到匹配,则为None. import re str1 = "Why ar ...

  10. Hibernate配置流程

    操作数据库必须要设置数据库的连接属性: driver_class,url,username,password(hibernate.cfg.xml)     2. 编写对象跟表之间的映射关系(类名.hb ...