实现跨域

实现跨域有多种方式, 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 等方式也可以根据实际情况选择。

相关推荐
martinzh1 分钟前
Spring AI 项目介绍
后端
前端付豪11 分钟前
20、用 Python + API 打造终端天气预报工具(支持城市查询、天气图标、美化输出🧊
后端·python
爱学习的小学渣13 分钟前
关系型数据库
后端
武子康15 分钟前
大数据-33 HBase 整体架构 HMaster HRegion
大数据·后端·hbase
前端付豪16 分钟前
19、用 Python + OpenAI 构建一个命令行 AI 问答助手
后端·python
凌览17 分钟前
斩获 27k Star,一款开源的网站统计工具
前端·javascript·后端
全栈凯哥20 分钟前
02.SpringBoot常用Utils工具类详解
java·spring boot·后端
狂师1 小时前
啥是AI Agent!2025年值得推荐入坑AI Agent的五大工具框架!(新手科普篇)
人工智能·后端·程序员
星辰大海的精灵1 小时前
使用Docker和Kubernetes部署机器学习模型
人工智能·后端·架构
MikeWe1 小时前
C++宏的解析:从基础语法到实战场景
后端