实现跨域

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

相关推荐
冬天的风滚草3 分钟前
Higress开源版 大规模 MCP Server 部署配置方案
后端
雨落倾城夏未凉3 分钟前
4.信号与槽
后端·qt
考虑考虑1 小时前
JDK9中的dropWhile
java·后端·java ee
martinzh3 小时前
Spring AI 项目介绍
后端
前端付豪3 小时前
20、用 Python + API 打造终端天气预报工具(支持城市查询、天气图标、美化输出🧊
后端·python
爱学习的小学渣3 小时前
关系型数据库
后端
武子康3 小时前
大数据-33 HBase 整体架构 HMaster HRegion
大数据·后端·hbase
前端付豪3 小时前
19、用 Python + OpenAI 构建一个命令行 AI 问答助手
后端·python
凌览3 小时前
斩获 27k Star,一款开源的网站统计工具
前端·javascript·后端
全栈凯哥3 小时前
02.SpringBoot常用Utils工具类详解
java·spring boot·后端