前端访问后端实现跨域

🕗 发布于 2024-11-20 07:16 前端

背景：前端在抖音里做了一个插件然后访问我们的后端。显然在抖音访问其他域名肯定会跨域。

解决办法：

1、使用比较简单的jsonp

JSONP

优点：JSONP 是通过动态创建 `<script>` 标签的方式加载外部数据，属于跨域数据请求的一种传统解决方案。JSONP 不会受到浏览器的同源策略限制，因此在某些跨域环境（如抖音小程序中）可以正常工作。

缺点：只能进行 GET 请求，无法支持 POST、PUT 等其他 HTTP 方法。

安全性较低，因为 JSONP 将代码直接注入到页面中，存在潜在的安全风险。

测试案例：

后端 springboot

@RestController
@Slf4j
@RequestMapping("/api")
public class CrosController {

    @GetMapping("/author/info")
    public String crosTest(@RequestParam("authorName") String authorName,
                           @RequestParam(value = "callback", required = false) String callback){
        // 参数校验
        if (authorName == null) {
            return "Invalid request: authorName is required";
        }
        // 模拟返回数据
        String jsonData = "{\"author_id\": 12345, \"author_name\": \"" + authorName + "\"}";

        // 判断是否为 JSONP 请求
        if (callback != null && !callback.isEmpty()) {
            // JSONP 响应
            String jsonpResponse = callback + "(" + jsonData + ");";
            return jsonpResponse;
        } else {
            // 普通 JSON 响应
            return jsonData;
        }
    }

}

前端html页面

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

</body>

</html>

<script>
 function jsonpRequest(url, params, callbackName) {
  return new Promise((resolve, reject) => {
    // 动态创建回调函数名称
    const uniqueCallback = callbackName || `jsonpCallback_${Date.now()}`;

    // 将回调函数注册到全局对象中
    window[uniqueCallback] = function (response) {
      // 清理全局回调函数和 script 标签
      delete window[uniqueCallback];
      document.body.removeChild(script);

      // 返回响应数据
      resolve(response);
    };

    // 构建完整的 URL（拼接参数）
    const query = Object.entries(params)
      .map(([key, value]) => `${key}=${encodeURIComponent(value)}`)
      .join("&");
    const fullUrl = `${url}?${query}&callback=${uniqueCallback}`;

    // 创建 script 标签
    const script = document.createElement("script");
    script.src = fullUrl;

    // 处理加载失败
    script.onerror = function () {
      delete window[uniqueCallback];
      document.body.removeChild(script);
      reject(new Error("JSONP request failed"));
    };

    // 插入 script 标签到文档中
    document.body.appendChild(script);
  });
}

// 使用示例
const url = "http://localhost:8080/api/author/info";
const params = { authorName: "烟火中的水滴" };

jsonpRequest(url, params)
  .then((data) => {
    console.log("Author Info:", data);
  })
  .catch((error) => {
    console.error("Error:", error);
  });

</script>

然后打开次页面。
1、打开控制台 2、执行可以看到结果正常返回了

jsonpRequest(url, params)
  .then((data) => {
    console.log("Author Info:", data);
  })
  .catch((error) => {
    console.error("Error:", error);
  });

在这里插入图片描述

2、@CrossOrigin 解决跨域

Spring Boot 的 @CrossOrigin 注解用于配置 CORS（跨域资源共享），它允许你的后端接受来自其他域的请求。

优点：CORS 是更现代、更安全的跨域解决方案，相比 JSONP，支持所有 HTTP 方法（如 GET、POST 等）。安全性高，因为 CORS 会进行严格的域名、方法等验证。
缺点：如果客户端（如抖音小程序）对 CORS 的处理有限，可能无法支持复杂的预检请求（如 OPTIONS 请求）。CORS 依赖浏览器的支持，如果环境对跨域限制较为严格（如一些小程序环境），可能 CORS 不生效。
我们先开启后端运行起来。看一些问题

1、通过控制台源null模拟跨域

后端代码

@RestController
@Slf4j
@RequestMapping("/api")
public class CrosController {
    @GetMapping("/author/info/cross")
    public String crossTest(@RequestParam("authorName") String authorName){
        // 参数校验
        if (authorName == null) {
            return "Invalid request: authorName is required";
        }
        // 模拟返回数据
        String jsonData = "{\"author_id\": 12345, \"author_name\": \"" + authorName + "\"}";
        return jsonData;
    }

}

1、通过curl
请求
curl 'http://localhost:8080/api/author/info/cross?authorName=123'
结果
{"author_id": 12345, "author_name": "123"}
这个属于正常的
2、打开一个index.html 然后控制台通过前端代码访问这个接口

fetch('http://localhost:8080/api/author/info?authorName=烟火中的水滴')
 .then(response => response.json())
 .then(data => console.log("JSON Response:", data))
 .catch(error => console.error("Error:", error));

发现报错
在这里插入图片描述
问题分析
错误提示：
No ‘Access-Control-Allow-Origin’ header is present on the requested resource 表示目标服务器（http://localhost:8080）没有返回允许跨域访问的CORS响应头。
浏览器的安全机制会拦截请求响应。
根本原因：
客户端代码运行的index.html被浏览器认为是从null源加载的（例如直接从文件系统打开），与http://localhost:8080是不同源。
目标服务器未配置CORS。
其实这个就是跨域了因为你从一个控制台打开访问8080端口但是你不是同源的就会报错。
那么解决办法就是加一个注解

 @CrossOrigin(origins = "*") // 允许指定来源跨域
    @GetMapping("/author/info/cross")
    public String crossTest(@RequestParam("authorName") String authorName){
        // 参数校验
        if (authorName == null) {
            return "Invalid request: authorName is required";
        }
        // 模拟返回数据
        String jsonData = "{\"author_id\": 12345, \"author_name\": \"" + authorName + "\"}";
        return jsonData;
    }

重新访问
fetch('http://localhost:8080/api/author/info/cross?authorName=烟火中的水滴') .then(response => response.json()) .then(data => console.log("JSON Response:", data)) .catch(error => console.error("Error:", error))
成功了
在这里插入图片描述
我们看下他发起的curl请求参数：

curl 'http://localhost:8080/api/author/info/cross?authorName=%E7%83%9F%E7%81%AB%E4%B8%AD%E7%9A%84%E6%B0%B4%E6%BB%B4' \
  -H 'Accept: */*' \
  -H 'Accept-Language: zh-CN,zh;q=0.9' \
  -H 'Connection: keep-alive' \
  -H 'Origin: null' \
  -H 'Sec-Fetch-Dest: empty' \
  -H 'Sec-Fetch-Mode: cors' \
  -H 'Sec-Fetch-Site: cross-site' \
  -H 'User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36' \
  -H 'sec-ch-ua: "Chromium";v="130", "Google Chrome";v="130", "Not?A_Brand";v="99"' \
  -H 'sec-ch-ua-mobile: ?0' \
  -H 'sec-ch-ua-platform: "macOS"'

源是null实际也属于跨域的。
上面是的源是null 我们接下来用python模拟一个源请求
模拟跨域，就得开启一个前端服务器然后请求后端。

2、模拟前端服务器端口3000实现跨域

使用 Python（自带）启动 HTTP 服务器：在终端中进入你的 index.html 所在的目录，并运行以下命令：
python -m http.server 3000
在这里插入图片描述

这会在 localhost:3000 上启动一个 HTTP 服务器。然后在浏览器中访问：
然后打开浏览器访问 http://localhost:3000/index.html
打开控制台执行
fetch('http://localhost:8080/api/author/info/cross?authorName=烟火中的水滴') .then(response => response.json()) .then(data => console.log("JSON Response:", data)) .catch(error => console.error("Error:", error))
在这里插入图片描述
最后我们打开Network看下他发起的请求是不是真的跨域了。
通过查看curl命令确实跨域了

curl 'http://localhost:8080/api/author/info/cross?authorName=%E7%83%9F%E7%81%AB%E4%B8%AD%E7%9A%84%E6%B0%B4%E6%BB%B4' \
  -H 'Accept: */*' \
  -H 'Accept-Language: zh-CN,zh;q=0.9' \
  -H 'Connection: keep-alive' \
  -H 'Origin: http://localhost:3000' \
  -H 'Referer: http://localhost:3000/' \
  -H 'Sec-Fetch-Dest: empty' \
  -H 'Sec-Fetch-Mode: cors' \
  -H 'Sec-Fetch-Site: same-site' \
  -H 'User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36' \
  -H 'sec-ch-ua: "Chromium";v="130", "Google Chrome";v="130", "Not?A_Brand";v="99"' \
  -H 'sec-ch-ua-mobile: ?0' \
  -H 'sec-ch-ua-platform: "macOS"'

原文地址：https://blog.csdn.net/qq_43566782/article/details/143887107

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：C++ 容器全面剖析：掌握 STL 的奥秘，从入门到高效编程
下一篇：k8s默认使用的后端网络模式

【MySQL实战45讲笔记】基础篇——事务隔离
简单来说，**事务就是要保证一组数据库操作，要么全部成功，要么全部失败**。在 MySQL 中，事务支持是在**引擎层**实现的。但并不是所有的存储引擎都支持事务，比如MySQL 原生的 MyISAM
阅读更多2024-11-23
MySQL之索引与事务
介绍了MySQL索引的分类，索引的底层数据结构，聚簇索引与非聚簇索引，非聚簇索引导致的回表，索引失效的场景。介绍了事务的特性，事务的隔离级别。
阅读更多2024-11-23
15天大厂真题带刷day1
小美对偶数因子很感兴趣，她将进行 𝑇T 次询问，每次都会给出一个正整数 𝑥x，请你告诉她 𝑥x 是否存在至少一个偶数因子。在一行上输入一个整数 𝑥 (1≤𝑥≤109)x (1≤x≤109) 代表小美询
阅读更多2024-11-23
Fakelocation Server服务器/专业版 Windows11
任务一打开 PowerShell（以管理员身份）命令安装 Chocolatey。任务三打开Fakelocation开源文件 | 查看IP地址。任务四写入Hosts地址文件。任务二可能遇到的错误
阅读更多2024-11-23
Elasticsearch客户端在和集群连接时，如何选择特定的节点执行请求的？
Elasticsearch客户端在和集群连接时，如何选择特定的节点执行请求的？
阅读更多2024-11-23
muduo库的使用
muduo库的使用及其基本原理
阅读更多2024-11-23
Node基本使用
Node基本使用
阅读更多2024-11-23
11 —— 打包模式的应用
需求：在开发模式下想让webpack使用style-loader进行css样式的处理；让它把css代码内嵌在js中；在生产模式下提取css代码。mini-css-extract-plugin插件：提取
阅读更多2024-11-23
04_HDMI20协议解析_General_Control
当通过HDMI传输音频信号时，General_Control是必须要传输的数据包之一, 如果没有，可能会有部分显示器有兼容性问题；General_Control 可以打开或者关闭静音功能；
阅读更多2024-11-23
本地安装YAPI
项目中用到很多的RESTAPI，光靠人工管理或者普通文档肯定是不行的，翻了很多的RESTAPI管理工具，还是选择了YAPI，原因有2，一个是接口位于内网，外网网站上管理测试不到内网接口，另外一个是使用
阅读更多2024-11-23