JS怎样在Spring中实现跨域请求_JS在Spring中实现跨域请求的完整教程-js教程-PHP中文网

JS怎样在Spring中实现跨域请求_JS在Spring中实现跨域请求的完整教程

看不見的法師

发布： 2025-11-14 08:40:03

原创

206人浏览过

答案：Spring通过CORS配置解决跨域，前端需匹配请求方式。具体包括：1. 配置全局CorsRegistry允许指定路径跨域；2. 使用@CrossOrigin注解控制特定接口；3. 前端fetch或axios设置credentials携带凭证；4. 处理预检请求确保OPTIONS通过；5. 可选Nginx反向代理实现同源。关键在于前后端协同配置响应头与请求参数。

js怎样在spring中实现跨域请求_js在spring中实现跨域请求的完整教程

在前后端分离开发中，前端应用和后端服务通常部署在不同的域名或端口上，这就导致了浏览器的同源策略限制，产生跨域问题。Spring 框架提供了多种方式来处理跨域请求，结合 JavaScript（JS）前端代码，可以完整实现跨域通信。

1. 什么是跨域请求

跨域请求是指当页面所在的域名、协议或端口与请求的目标资源不一致时，浏览器出于安全考虑阻止该请求。例如，前端运行在 http://localhost:3000，而后端接口在 http://localhost:8080，就构成了跨域。

解决跨域的核心是让服务器返回正确的 CORS（跨源资源共享）响应头，允许特定来源的请求。

2. Spring Boot 中配置全局跨域支持

在 Spring Boot 项目中，可以通过配置类统一开启跨域支持。

示例：创建一个配置类允许所有来源访问

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("/api/**") // 匹配 API 路径
                .allowedOriginPatterns("*") // 允许所有来源（生产环境应具体指定）
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                .allowedHeaders("*")
                .allowCredentials(true)
                .maxAge(3600);
    }
}

登录后复制

说明：

addMapping("/api/**")：指定哪些路径启用跨域。
allowedOriginPatterns("*")：允许所有域，生产建议写具体如 http://localhost:3000。
allowCredentials(true)：支持携带 Cookie，若设为 true，origin 不能为 *，需明确指定。

3. 在 Controller 或方法上使用 @CrossOrigin 注解

如果只想对某个控制器或方法开放跨域，可使用 @CrossOrigin 注解。

示例：在 Controller 上启用跨域

import org.springframework.web.bind.annotation.*;

@RestController
@CrossOrigin(origins = "http://localhost:3000", allowCredentials = "true")
@RequestMapping("/user")
public class UserController {

    @GetMapping("/{id}")
    public String getUser(@PathVariable Long id) {
        return "User ID: " + id;
    }

    @PostMapping("/login")
    public String login(@RequestBody User user) {
        return "Login success for " + user.getUsername();
    }
}

登录后复制

说明：

只允许来自 http://localhost:3000 的请求。
支持携带凭证（如 Cookie），前端需设置 withCredentials: true。

4. 前端 JS 发送跨域请求示例

前端使用 fetch 或 axios 发起请求时，需注意是否携带凭证。

使用 fetch 发送带凭证的请求

奇域

奇域是一个专注于中式美学的国风AI绘画创作平台

查看详情

fetch('http://localhost:8080/api/user/1', {
  method: 'GET',
  credentials: 'include'  // 发送 Cookie
})
.then(response => response.text())
.then(data => console.log(data))
.catch(err => console.error('Error:', err));

登录后复制

使用 axios 示例

axios.get('http://localhost:8080/api/user/1', {
  withCredentials: true
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error('Request failed:', error);
});

登录后复制

注意： 若后端设置了 allowCredentials=true，前端必须设置 credentials: 'include' 或 withCredentials: true，否则浏览器会拒绝响应。

5. 处理预检请求（Preflight Request）

对于复杂请求（如 POST JSON、带自定义 Header），浏览器会先发送 OPTIONS 请求进行预检。

Spring 的 CORS 配置会自动处理 OPTIONS 请求，只要正确配置 allowedMethods 和 allowedHeaders，无需额外编码。

确保服务器返回以下关键响应头：

Access-Control-Allow-Origin: 指定允许的源
Access-Control-Allow-Credentials: true（如需认证）
Access-Control-Allow-Methods: GET, POST, PUT, DELETE 等
Access-Control-Allow-Headers: Content-Type, Authorization 等

6. Nginx 反向代理解决跨域（可选方案）

如果不希望通过后端处理跨域，也可用 Nginx 做反向代理，使前后端同域。

Nginx 配置示例

server {
    listen 80;
    server_name localhost;

    # 前端静态资源
    location / {
        root /usr/share/nginx/html;
        try_files $uri $uri/ /index.html;
    }

    # 代理 API 请求到 Spring 后端
    location /api/ {
        proxy_pass http://localhost:8080/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

登录后复制

此时前端请求 /api/user 实际由 Nginx 转发到后端，避免跨域。

基本上就这些。通过 Spring 的全局或局部跨域配置，配合前端 JS 正确发送请求，即可稳定实现跨域通信。关键是后端响应头要正确，前端请求方式要匹配，尤其涉及凭证时要小心设置。不复杂但容易忽略细节。

以上就是JS怎样在Spring中实现跨域请求_JS在Spring中实现跨域请求的完整教程的详细内容，更多请关注php中文网其它相关文章！