实现跨域

实现跨域有多种方式, CORS 和 @CrossOrigin 是服务端解决跨域的方式,而 JSONP 是一种客户端解决跨域的方式。以下是一些主要的跨域解决方案:

  1. CORS (Cross-Origin Resource Sharing):

    • 服务端设置: 服务端通过在响应头中添加 CORS 相关的信息,允许指定的域名或所有域名的访问。在 Express 框架中,可以使用 cors 中间件,而在其他后端框架中,需要手动设置响应头。

    • 例子:

      ini 复制代码
      const express = require('express');
      const cors = require('cors');
      
      const app = express();
      app.use(cors()); // 允许所有域名访问
  2. JSONP (JSON with Padding):

    • 原理: 利用 <script> 标签没有跨域限制的特性,通过在页面上动态创建 <script> 标签,将跨域的数据作为 JavaScript 脚本执行。

    • 例子:

      ini 复制代码
      function jsonpCallback(data) {
        console.log(data);
      }
      
      const script = document.createElement('script');
      script.src = 'https://lfsun.com/data?callback=jsonpCallback';
      document.body.appendChild(script);
  3. @CrossOrigin 注解(Spring Framework):

    • 服务端设置: 在 Spring Framework 中,可以使用 @CrossOrigin 注解在控制器方法上标记允许跨域访问的配置。

    • 例子:

      less 复制代码
      @RestController
      public class MyController {
          @CrossOrigin(origins = "http://allowed-origin.com")
          @GetMapping("/data")
          public ResponseEntity<String> getData() {
              // Handle request
          }
      }
  4. 代理:

    • 原理: 在同源策略下,浏览器允许通过代理的方式请求其他域的数据。通过在服务端设置代理,将请求发送到目标域,然后将结果返回给客户端。

    • 例子: 配置反向代理,将请求转发到目标服务器。

      bash 复制代码
      /api -> http://example.com/api
  5. WebSocket:

    • 原理: WebSocket 是一种双向通信协议,不受同源策略的限制。通过建立 WebSocket 连接,客户端和服务端可以实现实时的双向通信。
    • 例子: 在客户端和服务端建立 WebSocket 连接。

选择使用哪种跨域方案通常取决于具体的需求和环境。CORS 是一种标准的、现代的解决方案,而 JSONP 通常用于兼容较老的浏览器。代理、WebSocket 等方式也可以根据实际情况选择。

相关推荐
武子康4 小时前
Java-80 深入浅出 RPC Dubbo 动态服务降级:从雪崩防护到配置中心秒级生效
java·分布式·后端·spring·微服务·rpc·dubbo
舒一笑5 小时前
我的开源项目-PandaCoder迎来史诗级大更新啦
后端·程序员·intellij idea
@昵称不存在6 小时前
Flask input 和datalist结合
后端·python·flask
zhuyasen6 小时前
Go 分布式任务和定时任务太难?sasynq 让异步任务从未如此简单
后端·go
东林牧之7 小时前
Django+celery异步:拿来即用,可移植性高
后端·python·django
超浪的晨7 小时前
Java UDP 通信详解:从基础到实战,彻底掌握无连接网络编程
java·开发语言·后端·学习·个人开发
AntBlack7 小时前
从小不学好 ,影刀 + ddddocr 实现图片验证码认证自动化
后端·python·计算机视觉
Pomelo_刘金8 小时前
Clean Architecture 整洁架构:借一只闹钟讲明白「整洁架构」的来龙去脉
后端·架构·rust
双力臂4048 小时前
Spring Boot 单元测试进阶:JUnit5 + Mock测试与切片测试实战及覆盖率报告生成
java·spring boot·后端·单元测试
midsummer_woo10 小时前
基于spring boot的医院挂号就诊系统(源码+论文)
java·spring boot·后端