跨域问题及其解决-CSDN博客

本文链接：https://blog.csdn.net/2403_85207115/article/details/147908046

今天在学习黑马的bigevent项目前端部分时遇到了跨域问题，个人感觉是个很有意思的知识点，所以在此做总结与分享。

一、跨域问题的概念与产生根源

跨域问题是指在 Web 开发中，由于浏览器的同源策略限制，导致不同源的前端页面和后端接口之间进行数据交互时出现的问题。所谓同源，其实就是指 URL 中的协议、域名和端口三个要素完全相同。比如：http://www.example.com:8080与http://localhost:5173就是因端口不同而属于不同源。当前端 JavaScript 发起的 HTTP 请求目标 URL 与当前页面 URL 不同源时，浏览器便会依据同源策略，拦截该请求，这就是产生跨域问题的原因。

同源策略（Same-Origin Policy）：浏览器实施的一种关键安全机制，旨在保护用户数据安全和隐私。该策略的核心在于限制不同源之间的交互，规定网页只能访问与其来源相同的脚本、文档或其他资源。

二、跨域问题的常见解决方案

1. JSONP（JSON with Padding）

JSONP 利用<script>标签的src属性不受同源策略限制的特性实现跨域数据获取。它的原理是在后端返回一个包含 JSON 数据的 JavaScript 函数调用，前端预先定义好该函数，当<script>标签加载完成后，自动执行函数，从而获取数据。不过，JSONP 仅支持 GET 请求，且存在一定的安全风险（如 XSS 攻击）。

后端 Java 代码示例

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class JsonpController {
    @RequestMapping("/getData")
    public String jsonp(@RequestParam(value = "callback", required = false) String callback) {
        String data = "{\"name\":\"Alice\",\"age\":28}";
        if (callback != null) {
            return callback + "(" + data + ")";
        }
        return data;
    }
}

前端 HTML 示例

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

<head>
    <meta charset="UTF-8">
</head>

<body>
    <script>
        function handleData(data) {
            console.log(data);
        }
    </script>
    <script src="http://localhost:8080/getData?callback=handleData"></script>
</body>

</html>

2. CORS（跨域资源共享）

CORS 是现代浏览器推荐的跨域解决方案，它通过在服务器响应头中添加特定字段，告知浏览器允许跨域访问。在 Java 开发中，尤其是 Spring Boot 项目，实现 CORS 非常便捷。

方法一：使用 @CrossOrigin 注解

在控制器类或方法上添加@CrossOrigin注解，可快速实现跨域支持。

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("/api")
public class MyController {
    // 允许http://example.com跨域访问
    @CrossOrigin(origins = "http://example.com")
    @GetMapping("/data")
    public String getData() {
        return "这是跨域获取的数据";
    }
}

方法二：全局配置 CORS

通过实现WebMvcConfigurer接口，在配置类中进行全局 CORS 设置，这种方式更为灵活，适用于复杂的项目需求。

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
               .allowedOrigins("*")
               .allowedMethods("GET", "POST", "PUT", "DELETE")
               .allowCredentials(true)
               .maxAge(3600);
    }
}

3. 代理服务器

在同源服务器上搭建代理服务器，由它转发跨域请求，也是一种有效的解决方案。前端将请求发送到同源的代理服务器，代理服务器再将请求转发到目标后端服务器，最后将响应返回给前端，从而绕过浏览器的同源策略限制。

前端 Vue.js 开发环境代理配置示例

先修改request.js文件中的baseURL

const baseURL = '/api'; //配置代理，给访问后台的请求路径添加标识

再在vite.config.js文件的defineConfig函数中添加以下内容配置代理

server:{
    proxy:{
      '/api':{//获取路径包含/api的请求
        target:'http://localhost:8080', //后台服务地址
        changeOrigin:true,//是否修改源，即是否改变请求头
        rewrite: (path) => path.replace(/^\/api/, '')//利用正则表达式重写路径
      }
    }
  }