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

一、跨域产生的条件

  • 使用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. 安卓微信overflow-x overflow-y引发的bug

    今天xgo文章图片页上线用微信扫页面发现一个bug,页面可以双击放大缩小. 找了半天原因,发现是图片描述设置了overflow-y引发的bug. 建议在微信场景里满屏显示不能滚动的页面里慎用overf ...

  2. Python3之内建模块collections

    collections是python内建的一个集合模块,提供了许多有用的集合类. namedtuple 我们知道tuple可以表示不可变集合,例如,一个点的二维坐标可以表示成 >>> ...

  3. 【C/C++开发】malloc，calloc和realloc的区别和注意事项

    (1)C语言跟内存分配方式 <1>从静态存储区域分配.        内存在程序编译的时候就已经分配好,这块内存在程序的整个运行期间都存在.例如全局变量.static变量. <2&g ...

  4. 19-js策略模式

    var PriceStrategy = function() { var stragtegy = { return30: function(price) { return +price + parse ...

  5. Word表格和文本自由互换

    未完 ...... 点击访问原文(进入后根据右侧标签,快速定位到本文)

  6. Pycharm（Eclipse）常用快捷键

    在File_Settings_Keymap中可以设置: 确定快捷键模式为Eclipse 看方法的源码:ctrl+鼠标左键 回退之前代码:alt+左键 前进之前代码:alt+右键 调换相邻两行代码位置: ...

  7. C++打印乘法表

    #include <iostream> #include <Windows.h> #include <iomanip> using namespace std; i ...

  8. PHP 中 include 和 require 的区别详解

    require() 语句的性能与 include() 相类似,都是包括并运行指定文件.除了处理失败的方式不同之外.require 在出错时产生 E_COMPILE_ERROR 级别的错误,终止脚本运行 ...

  9. （转）FFMPEG 实现 YUV，RGB各种图像原始数据之间的转换（swscale）

    雷霄骅分类专栏: FFMPEG FFmpeg 本文链接:https://blog.csdn.net/leixiaohua1020/article/details/14215391 FFMPEG中的sw ...

  10. js复制内容到粘贴板

    点击右边内容:<span onclick="copyContent(this);" title="点击复制">啊,我被复制了</span> ...