什么是跨域以及如何解决？通俗易懂带你彻底搞定 _跨域

现在的web项目，很多都是前后端分离，特别容易出现跨域问题
那么什么是跨域问题呢？本篇文章带你彻底从本质上弄明白什么是跨域问题以及如何解决
一跨域有什么现象？我们先看一下现象，如何出现跨域问题，如下实验

前端：浏览器正在访问一个页面：https://www.helloworld.NET/special ，此页面中发送了一个后端的一个 http 接口
后端：访问的后端接口为： https://tiger-api.helloworld.net/v1/special/getSpecialList

文章插图

上面的提示：has been blocked by CORS policy: Response to preflight request does not pass access control check
翻译过来就是：已被CORS策略阻止:对请求的响应未通过访问控制检查
这就是没有配置相关的跨域参数，是不能访问这个接口的
二什么是跨域问题？【什么是跨域以及如何解决？通俗易懂带你彻底搞定】举例来说，就是：浏览器访问一个页面时，比如访问
https://www.helloworld.net/special
此时的协议，主机，端口，分别是 https , www.helloworld.net , 80
那么这个页面中，发的接口请求，这个接口的协议，主机,端口必须和当前的页面的一样，三个都一样才行，才可以访问
否则就会出现上面的跨域现象
比如浏览器打开页面
https://www.helloworld.net/special ，
在此页面中，可以请求接口
https://www.helloworld.net/getSpecialList
因为他们的协议，主机，端口，都是相同的，是可以请求成功的。
总结一句话：在浏览器中，只有协议，主机，端口三者都相同时，才可以互相访问，否则，不可以访问
注意：是在浏览器中
三跨域问题是怎么造成的？
这个问题就涉及到了浏览器的同源策略
这就是浏览器的同源策略，通过上面的例子可以知道
所谓的同源策略，其实就是协议，主机, 端口都相同的，才可以互相访问
否则只要有一个不同，是不能访问的。

注：跨域问题，只是出现在浏览器中，因为浏览器有同源策略，所以才会有跨域问题

之前我也一直以为，跨域问题是由于浏览器的同源策略产生的，那么是不是只需要在请求前，加点配置就能解决了
为什么都是后端在响应头里面加点配置才解决的？为什么是后端？跨域问题是浏览器造成的，这和后端有什么关系？
从上面，我们知道一个事实：我们访问的url ，如果不是同源的，也就是协议，主机，端口，有一个不一样，是不能请求通的
那么问题来了：

为什么请求不通？
既然请求不通，到底是作用在http的哪个阶段导致的请求不通？
是浏览器拦截了请求，没有让请求发出去，导致的不通？
还是浏览器拦截了响应，导致的不通？

答案就是：请求是能正常的发出去的，后端也正常的响应了，浏览器是把响应给拦截了，所以会出现开头的
has been blocked by CORS policy: Response to preflight request does not pass access control check
用一张图说明，就很容易明白了，如下图：

文章插图

四如何解决跨域问题通过上面的图我们知道了，浏览器是拦截了响应（和第一阶段的请求是没有关系的），导致整个http请求没有走通
那么，如何解决，让接口能正常的发出去，正常的收到响应数据呢？
很容易就想到，如何在响应头中添加一些特殊的字段，浏览器一看到有这些字段，就不拦截了，那么跨域问题不就解决了吗