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); } );
更推荐的动态参数构建方式(避免手动拼接出错):
如果需要动态传递mc、page、size参数,建议用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
这会导致前端传递的page和size参数被颠倒接收,分页逻辑完全错误。修正后应该是:
@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




