前后端分离项目跨域问题不可避免。通常，前端由React、Vue等框架编写，通过ajax请求服务端API，以json格式传输数据。那么为什么会出现跨域问题呢？解决跨域问题的方法有哪些？为了弄清楚这两个问题，我们需要了解什么是同源策略。浏览器的同源策略同源策略（Sameoriginpolicy）是一种安全约定，是所有主流浏览器最核心、最基本的安全功能之一。同源策略规定不同域的客户端脚本在没有明确授权的情况下不能互相请求资源。同源是指：域名、协议、端口都相同。比如我们访问一个网站，这个页面请求如下地址的情况是这样的：另外，同源策略分为以下两种情况：DOM同源策略：禁止操作不同来源页面的DOM，主要是防止出现iframe的情况。比如iframe标签中有支付宝支付页面，如果没有同源策略，那么钓鱼网站除了域名可以和支付宝网站一模一样。XMLHttpRequest同源策略：禁止使用XHR对象向异源服务器发起http请求。例如网站记录银行的cookie。这时候你访问了一个恶意网站，黑客获取到你的cookie，然后通过ajax请求之前的银行网站，就可以轻松获取到你的银行信息。所以，正是因为同源策略，大家的网络环境才比较安全。跨域问题解决方法了解了同源策略，就知道为什么会出现跨域问题了，都是为了安全。但是在实际研发中，大家还是需要跨域访问资源。典型的应用场景是前后端分离的项目。那么我们如何解决跨域问题呢？CORS-Cross-DomainResourceSharingCORS是一个W3C标准，它定义了当跨域问题发生时，客户端和服务端如何通信来解决跨域问题。其实就是前后端约定定义一些自定义的http请求头，这样当客户端发起请求的时候，服务端就可以识别请求是通过还是通过。浏览器将CORS请求分为简单请求和非简单请求：简单请求简单请求必须满足以下两个条件：请求方法必须是HEAD、GET和POST三种方法之一。Http请求头只能是：Accept、Accept-Lanuage、Content-Lanuage、Last-Event-ID、Content-Type，其中Content-Type限制为三个值application/x-www-form-urlencoded、multipart/表单数据，文本/纯文本。非简单请求非简单请求不满足简单请求的条件。对于非简单请求，浏览器会发起预检请求。预检请求是指当浏览器检查到你的页面包含跨域请求时，会向对应的服务器发送OPTIONS请求，检查服务器是否允许对当前域名进行跨域请求。如果服务器允许域名请求，会返回一个204或200状态码，浏览器收到权限请求后会继续发送相应的GET/POST/PUT/DELETE请求。同时，服务器也会将预检请求的缓存时长告知浏览器。在此时间范围内，浏览器不会再次发起预检请求。原理基本上就是上面的。我们在实际业务中如何通过配置来解决跨域问题呢？基本上，常见的方式有以下三种：nginx配置通常我们可以在nginx中添加如下配置来解决跨域问题：入侵。jsonp由于script标签不受浏览器同源策略的影响，所以允许跨域资源请求（我们每个页面都引用了大量的第三方js文件）。所以可以使用动态创建script标签，通过src属性发起跨域请求，这就是jsonp的原理。但是jsonp只支持GET请求，不是什么好办法。服务端代码控制可以在服务端添加对跨域请求的支持：该方法相当于一个全局过滤器，对所有请求进行一次过滤。以上三种方式一定程度上可以解决跨域问题，但是nginx配置和服务端控制不能同时存在，否则会报错“Access-Control-Allow-OriginNotAllowMultiplevalue”.个人比较推荐nginx配置的方式，一劳永逸，不用每个web项目都写跨域代码。你在工作中遇到过跨域问题吗？它们是如何解决的？欢迎评论区交流讨论，共同学习~本期结束，分享到这里。我是小编NanfengChui，专注于分享好玩、有趣、新颖、实用的开源项目、开发者工具、学习资源！希望和大家一起学习交流。欢迎来到我的公众号【Github导航站】。之前的推荐太美了！拥有3个开源图标库，再也不用请设计师了。10个你从未见过的vue.js库！用得好，事半功倍！太及时了！13个SpringBoot培训项目，用好，升职加薪也不愁还在从头到尾做项目？这6个SpringBoot项目用好，事半功倍！《00后缩略黑语言翻译器》上GitHub热榜，中年网友终于看懂年轻人的awsl
