跨域原理解析以及解决方案

前言:跨域原理解析以及解决方案
个人博客 已更新该文章— 跨域原理解析以及解决方案

1. 什么是跨域?

在 Web 应用中,浏览器使用同源策略(Same Origin Policy)来保护用户隐私和安全。同源是指 URL 的协议、端口号和主机名相同。同源策略禁止加载一个不同于当前文档来源的脚本、样式表或图像,也不能通过 AJAX 请求从另一个域名获取数据。

简单说来,当浏览器请求的资源的协议、子域名、域名、端口号中任意一个与当前页面地址不同的时候,就会发生跨域现象。

2. 分析造成跨域的原因是什么?

跨越现象并非一个 bug,而是 JavaScript 和浏览器的一个基本安全概念。跨域产生的原因主要有以下几种:

  • 协议不同
  • 域名不同
  • 端口不同(协议和域名相同,端口不同也算跨域)
  • 不同子域名(如sub1.example.comsub2.example.com,二级域名相同,但是前缀不同)

3. 如何解决跨域?

为了解决跨域问题,需要对后端和前端进行配置。以下是常见的几种解决方法:

3.1 CORS(跨域资源共享)

基于 HTTP 协议的一种跨域资源访问机制,设计目的是让 Web 应用服务器能够支持跨域访问,而不是浏览器前端。在服务端添加对应的响应头允许跨域访问。


  HTTP Access-Control-Allow-Origin: http://foo.example 
  Access-Control-Allow-Methods: GET, POST 
  Access-Control-Max-Age: 86400 

  • Access-Control-Allow-Origin:设置被允许访问的来源地址或域名。 “*” 表示所有来源均可访问。
  • Access-Control-Allow-Methods:允许跨域请求的 HTTP 方法。
  • Access-Control-Max-Age:缓存预检请求的时间,单位为秒。在此期间内发送的请求将不再发送预检请求。

3.2 反向代理

前端与后台进行约定,在通过反向代理(如 Nginx)设置代理转发,使得 JavaScript 发送的AJAX 请求在同源策略下是无序考虑跨域问题的。


  nginx location /api/ { 
     proxy_pass http://localhost:3000/;
  }

3.3 JSONP JSONP 是一种常用的跨域解决方案。

它不像 AJAX 请求那样会受到同源策略的限制,而是利用 script 标签没有跨域限制的漏洞。
因为在 script 标签内可以加载其他域名下的 JavaScript 资源。服务端返回一段函数调用代码并把需要传递的 JSON 数据作为参数传入该函数中,然后客户端使用 <script>标签来执行该代码。

3.4 WebSocket WebSocket

允许浏览器和服务器间进行实时双向通信。客户端发起建立 WebSocket 连接请求,如果服务器支持 WebSocket 并允许该连接,那么就能够在客户端与服务器之间建立一个 WebSocket 通道,双方便可通过这个通道进行数据传输。
以上是常见的跨域解决方法,不同的场景有不同的解决方式选择。目前最流行和推荐的解决方法是使用 CORS,因为它比 JSONP 更加安全、灵活

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值