You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

Angular+Spring跨域请求报错求助:仅支持指定协议方案

解决Angular调用Spring REST接口的跨域与请求错误问题

看起来你遇到的问题主要是两个核心点:URL格式错误Spring参数绑定的小失误,另外我也帮你梳理下跨域配置的验证要点,一步步来解决:

1. 先修复Angular端的请求URL错误

你当前的请求代码里URL写的是 'url:http://localhost:8080/searchmc=A',这直接触发了浏览器的跨域协议报错,原因有两个:

  • 多余的 url: 前缀会被浏览器识别为非标准协议(正常应该是 http://),这就是报错提示“Cross origin requests are only supported for protocol schemes: http, data...”的根本原因。
  • 参数 mc 前面缺少 ? 分隔符,正确的带参数URL应该用 ? 连接路径和第一个参数,多个参数用 & 拼接。

修正后的基础请求代码:

this.http.get('http://localhost:8080/search?mc=A')
  .map(resp => resp.json())
  .subscribe(
    data => { this.pageBien = data; },
    err => { console.log(err); }
  );

更推荐的动态参数构建方式(避免手动拼接出错):

如果需要动态传递mcpagesize参数,建议用HttpParams来构建请求参数:

// 先导入HttpParams
import { HttpParams } from '@angular/common/http';

// 构建参数
const params = new HttpParams()
  .set('mc', 'A') // 搜索关键词
  .set('page', '0') // 页码,对应Spring的page参数
  .set('size', '5'); // 每页条数,对应Spring的size参数

// 发起请求
this.http.get('http://localhost:8080/search', { params })
  .subscribe(
    data => { this.pageBien = data; },
    err => { console.log(err); }
  );

2. 修复Spring RESTController的参数绑定错误

看你的Spring代码,发现参数注解的name属性和变量名搞反了:

// 错误的绑定:name="size"对应int page,name="page"对应int size
@RequestParam(name="size",defaultValue="0") int page, 
@RequestParam(name="page",defaultValue="5") int size

这会导致前端传递的pagesize参数被颠倒接收,分页逻辑完全错误。修正后应该是:

@CrossOrigin(origins = "http://localhost:4200")
@RequestMapping(value="/search",method=RequestMethod.GET)
public Page<Bien> chercher( 
    @RequestParam(name="mc",defaultValue="") String mc, 
    @RequestParam(name="page",defaultValue="0") int page, // name="page"对应int page
    @RequestParam(name="size",defaultValue="5") int size) { // name="size"对应int size
    // 注意:较新的Spring版本推荐用PageRequest.of替代构造方法
    return bienRepository.chercher("%"+mc+"%", PageRequest.of(page, size));
}

3. 验证跨域配置的有效性

你的@CrossOrigin(origins = "http://localhost:4200")配置本身是正确的,但需要确认:

  • Angular应用确实运行在http://localhost:4200端口(默认端口,除非你修改了angular.json里的配置)
  • Spring服务确实运行在http://localhost:8080端口,和请求URL一致
  • 如果后续部署到生产环境,记得把origins改成实际的前端域名,不要直接用@CrossOrigin(origins = "*")(生产环境存在安全风险,建议指定具体允许的域名)

内容的提问来源于stack exchange,提问作者Anarxhy

火山引擎 最新活动