认识达内从这里开始

跨域问题对于大多数后端编程开发程序员来说是非常常见的一个问题了，而本文我们就通过案例分析来简单了解一下，程序员如何解决跨域问题。

先来看下跨域的定义

跨域的广义定义：跨域是指一个域下的文档或脚本试图去请求另一个域下的资源。

我们经常遇到的跨域是由浏览器同源策略限制的一类请求场景。

栗如，下面的请求就发生了跨域，在京东的H5页面中请求淘宝的接口

redis

上面栗子中跨域终的罪魁祸就是浏览器的同源策略。

1、因为上面的域名不相同，所以请求的接口被认为是非同源。

2、同时出于安全性，浏览器限制脚本内发起的跨源HTTP请求。例如，XMLHttpRequest和FetchAPI遵循同源策略。所以上面的请求就报了跨域的错误。

同源策略

什么是同源策略

同源策略/SOP(Sameoriginpolicy)是一种约定，由Netscape公司1995年引入浏览器。

同源策略是指在Web浏览器中，允许某个网站脚本访问另一个网站的数据，但前提是这两个网站必须满足三个相同:

1、协议相同;

2、域名相同;

3、端口相同;

一旦两个网站满足上述条件，这两个网站就被认定为具有相同来源。

非同源的限制条件

如果两个网站非同源，将受到下面的几种限制

1、Cookie、LocalStorage和IndexDB无法读取;

2、DOM无法获得;

3、AJAX请求不能发送。

同源策略的目的

同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。

栗如：Cookie中存了一些用户的登陆信息，如果没有同源策略的限制，那么任何网站都能访问Cookie，用户的信息就会泄露了，就能伪造用户信息登陆目标网站了，这显然是有很大的安全隐患的。

如何处理跨域

因为非同源有上面三种限制，这种能够规避一定的安全问题，但是有时候我们正常的使用也受到了影响，所以有时候我们需要想办法规避这种限制。

非同源限制中的

1、Cookie、LocalStorage和IndexDB无法读取;

2、DOM无法获得;

这里就不展开讨论了，这种只需要在前端页面中进行调整就行了，这里重点关注下有和后端交互的3、AJAX请求不能发送的这种限制。

处理AJAX非同源的限制

同源政策规定，AJAX请求只能发给同源的网址，否则就报错。

除了架设服务器代理(浏览器请求同源服务器，再由后者请求外部服务)，有三种方法规避这个限制。

1、JSONP

2、WebSocket

3、CORS

关于WebSocket和JSONP的处理参见浏览器同源政策及其规避方法

作为服务端开发，对于CORS使用的比较多，这里展开讨论下

CORS

CORS是一个W3C标准，全称是"跨域资源共享"(Cross-originresourcesharing)。

它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

跨源资源共享(CORS)(或通俗地译为跨域资源共享)是一种基于HTTP头的机制，该机制通过允许服务器标示除了它自己以外的其它origin(域，协议和端口)，使得浏览器允许这些origin访问加载自己的资源。跨源资源共享还通过一种机制来检查服务器是否会允许要发送的真实请求，该机制通过浏览器发起一个到服务器托管的跨源资源的"预检"请求。在预检中，浏览器发送的头中标示有HTTP方法和真实请求中会用到的头。

实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

CORS的使用的关键在服务端，浏览器发送请求，服务端接收到客户端请求做一些判断(请求方是否在自己的“白名单”里?)，如果没问题就返回数据，否则拒绝。

【免责声明】：本内容转载于网络，转载目的在于传递信息。文章内容为作者个人意见，本平台对文中陈述、观点保持中立，不对所包含内容的准确性、可靠性与完整性提供形式地保证。请读者仅作参考。更多内容请加抖音太原达内IT培训学习了解。