乐趣区

关于跨域:前后端分离项目如何解决跨域问题

jiezi

  前后端拆散我的项目跨域问题是不可避免的。通常状况下前端由 React、Vue 等框架编写，通过 ajax 申请服务端 API，传输数据用 json 格局。

  那么为什么有跨域的问题呢？解决跨域问题有哪些形式？搞清楚这两个问题咱们须要理解一下什么是同源策略。

浏览器的同源策略

  同源策略（Same origin policy）是一种平安约定，是所有支流浏览器最外围也是最根本的平安性能之一。同源策略规定：不同域的客户端脚本在没有明确受权的状况下，不能申请对方的资源。同源指的是：域名、协定、端口均雷同。

  比方咱们拜访一个网站, 那么这个页面申请如下地址得状况是这样的：

  另外，同源策略又分如下两种状况：

  1. DOM 同源策略：禁止对不同源的页面 DOM 进行操作，次要避免 iframe 的状况。比方 iframe 标签里放一个支付宝付款的页面，如果没有同源策略，那么钓鱼网站除了域名不同，其余的则能够和支付宝的网站截然不同。
  2. XMLHttpRequest 同源策略：禁止应用 XHR 对象向不同源的服务器发动 http 申请。比方网站记录了银行的 cookie，这个时候你拜访了歹意网站，黑客拿到你的 cookie，再通过 ajax 申请之前的银行网站，便能够轻易的拿到你的银行信息。

  所以，正是因为有了同源策略，大家的网络环境才绝对的平安一些。

跨域问题的解决办法

  理解了同源策略，就晓得为什么会有跨域问题的产生了，都是为了平安。然而理论研发中，大家还是须要跨域去拜访资源。典型的利用场景就是前后端拆散的我的项目了。那么咱们如何去解决跨域问题呢？

CORS- 跨域资源共享

  CORS 是一种 W3C 规范，定义了当产生跨域问题的时候，客户端与服务端如何通信解决跨域问题。实际上就是前后端约定好定义一些自定义的 http 申请头，让客户端发动申请的时候可能让服务端辨认进去该申请是过还是不过。

  浏览器将 CORS 申请分为简略申请和非简略申请：

简略申请

  简略申请必须满足以下两个条件：

  1. 申请形式必须是 HEAD、GET、POST 三种办法之一。
  2. Http 申请头必须只能是：Accept、Accept-Lanuage、Content-Lanuage、Last-Event-ID、Content-Type，其中 Content-Type 只限于三个值 application/x-www-form-urlencoded、multipart/form-data、text/plain。

非简略申请

  不满足简略申请条件的就是非简略申请。针对非简略申请，浏览器会发动预检申请。预检申请的意思是当浏览器查看到你的页面含有跨域申请的时候，会发送一个 OPTIONS 申请给对应的服务器，以检测服务器是否容许以后域名的跨域申请。如果服务端容许该域名申请，则返回 204 或 200 状态码，浏览器接管到容许申请时候再持续发送对应的 GET/POST/PUT/DELETE 申请。同时服务器端也会告知浏览器预检申请的缓存时长是多少，在这个工夫范畴内，浏览器不会再次发动预检申请。

  原理基本上就是下面说的这些，理论业务中咱们如何通过配置来解决跨域问题呢？基本上常见的就是三种形式：

nginx 配置

  通常咱们在 nginx 减少如下配置即可解决跨域问题：

  用 nginx 这种形式是最舒服的，不须要客户端和服务端多做其余工作，对代码无入侵。

jsonp

  因为 script 标签是不受浏览器同源策略的影响，容许跨域申请资源（咱们的每一个页面都援用了大量第三方 js 文件）。所以能够利用动态创建 script 标签，通过 src 属性发动跨域申请，这就是 jsonp 的原理。然而 jsonp 只反对 GET 申请，所以并不是一种好的形式。

服务端代码管制

  能够在服务端减少对跨域申请的反对：

  这种形式相当于全局过滤器，对所有申请都过滤一遍。

  以上三种形式都能够肯定水平上解决跨域问题，然而 nginx 配置和服务端管制不能同时存在，否则会报“Access-Control-Allow-Origin Not Allow Multiple value”的谬误。集体比拟举荐 nginx 配置的形式，一劳永逸，不须要每个 web 我的项目都去编写跨域的代码。

  大家在工作中有没有遇到过跨域问题呢？都是怎么解决的？欢送评论区交换探讨，独特学习~

结尾

本期就分享到这里，我是小编南风吹，专一分享好玩乏味、离奇、实用的开源我的项目及开发者工具、学习资源！
心愿能与大家独特学习交换, 欢送关注我的公众号 【Github 导航站】。

往期举荐

太漂亮了！有了 3 款开源图标库，不必再去求设计师了

10 个相见恨晚的 vue.js 库！用好了，事倍功半！

太及时了！13 个 Spring Boot 练手我的项目, 用好了，升职涨薪不必愁

程序员接私活必备后盾框架，不必反复造轮子，网友：太好用了！

还在从头到尾撸我的项目？这 6 个 SpringBoot 我的项目用好了，事倍功半！

「00 后缩写黑话翻译器」登上 GitHub 热榜，中年网民终于能看懂年轻人的 awsl

退出移动版