跨域问题出现 => 解决办法

什么是跨域问题呢?

跨域(Cross-Origin)指的是在 Web 开发中,一个网页的运行环境(域)与所请求资源的域不一致,即请求的目标资源与当前网页的域名(协议、域名或端口)不同。

同源策略

Web 浏览器遵循同源策略(Same-Origin Policy),这是一种安全策略,旨在防止潜在的恶意网站窃取用户数据或进行其他安全攻击。同源策略要求网页的运行环境和所请求的资源必须拥有相同的协议、域名和端口,否则浏览器会阻止跨域请求的执行。

举例来说,每个网站都有一个域名或者IP地址(实际上域名就是对IP地址的别名,方便人们记忆)。当我们访问一个网站时,浏览器会将某个页面下载到本地并解析,以展示图形页面。为了支持更多的业务需求,在这个页面中可能会发起一些额外的请求。为了避免页面卡顿,我们使用了Ajax技术偷偷地通过后门请求数据。偷偷走后门是可行的,但是必须遵循规则,不可以随意发起请求。

假设当前页面是www.baidu.com,在这个页面中发送了一个Ajax请求。浏览器允许请求发送出去,但是请求的地址不是本身的地址,而是www.hao123.com/api/xxxx这样的地址。此时,浏览器会检查响应,并查看服务端是否允许任何来源发起请求。如果服务端允许,浏览器将放行请求。否则,浏览器会报错,这种错误就是跨域问题。

如何处理跨域问题呢?

1.JSONP(JSON with Padding)

核心思想是浏览器只限制ajax,不限制图片、多媒体、css、js等资源访问其他网站,恰好利用这个特性,使用一些技巧来解决跨域。

JSONP 是一种通过添加一个<script>标签来进行跨域请求的方法。服务器返回的不是纯JSON数据,而是一个包含JSON数据的函数调用。这个函数会被前端代码定义,从而实现跨域数据的获取。JSONP只支持GET请求。

有局限性,需要回调函数 +别人服务端配合

2.CORS(Cross-Origin Resource Sharing)

CORS 是一种由服务器设置的响应头,允许特定的源在浏览器上进行跨域访问。服务器可以设置Access-Control-Allow-Origin响应头来指定允许的源,以及其他相关的CORS头,如Access-Control-Allow-MethodsAccess-Control-Allow-Headers等。CORS支持各种HTTP方法。

有局限性,需要服务端配合,别人服务端安全性降低

3.代理服务器(Proxy)

前端可以通过在自己的服务器上设置代理,使其能够代替浏览器向目标服务器发起请求。前端代码向自己的服务器发送请求,然后服务器再将请求转发到目标服务器,并将响应返回给前端。这样可以避免跨域问题,因为浏览器实际上只与同源的服务器通信。

这个是比较好的解决方案

4.WebSocket

如果需要进行实时通信,WebSocket 提供了一种在浏览器中实现跨域通信的方法。WebSocket 协议允许在不受同源策略限制的情况下建立双向通信。

这些就是当在项目中遇到跨域问题时快速的解决办法。

猜你喜欢

转载自blog.csdn.net/a_strong_pig/article/details/132326240#comments_28205763