Angular 4搜索功能实现求助：调用SpringBoot接口遇302错误

首先，从你描述的情况来看：后端接口通过Postman调用正常，但前端点击搜索按钮时出现302 OK的重定向错误，同时Eclipse终端能输出目标数据，问题大概率出在跨域配置或者前端代码的类型/路径问题上，下面一步步帮你定位解决：

问题代码梳理 #

先把你提供的代码整理清晰，方便排查：

EvenementService.ts

@Injectable() 
export class EvenementService { 
  private evensUrl_del = 'http://localhost:8080/evenement'; 
  private headers = new Headers({ 'Content-Type': 'application/json' }); 
  private options = new RequestOptions({ headers: this.headers }); 

  constructor(private http: Http) { } 

  // Get all events 
  getEvenement(): Promise<Evenement[]> { 
    return this.http.get(this.evensUrl) 
      .toPromise() 
      .then(response => response.json() as Evenement[]) 
      .catch(this.handleError); 
  } 

  getEvenementByType(typeE: string): Promise<Evenement[]> { 
    return this.http.get(this.evensUrl_del + '/evenements/' + typeE, this.options) 
      .toPromise() 
      .then(response => response.json() as Evenement) // 这里存在类型错误！
      .catch(this.handleError); 
  } 
}

EvenementComponent.ts

@Component({ 
  selector: 'app-evenement', 
  templateUrl: './evenement.component.html', 
  styleUrls: ['./evenement.component.css'] 
}) 
export class EvenementComponent implements OnInit { 
  events: Evenement = new Evenement(); 
  evenmt: Evenement[]; 
  typeE: string; 

  constructor(public router: Router, private modalService: NgbModal, private evenementService: EvenementService, private toastyService: ToastyService) { } 

  ngOnInit(): void { 
    this.typeE=""; 
  } 

  ver(events: Evenement, modal) { 
    evenmt => this.evenmt = evenmt; // 此处逻辑无效，仅定义箭头函数未调用
    this.modalService.open(modal, { size: 'lg' }); 
  } 

  searchEvenement(){ 
    this.evenementService.getEvenementByType(this.typeE)
      .then(evenmt => this.evenmt = evenmt)
      // 建议添加错误捕获，方便调试
      .catch(err => console.error('搜索错误:', err)); 
  } 

  getEvenements() { 
    this.evenementService.getEvenement().then(evenmt => this.evenmt = evenmt); 
  } 
}

evenement.component.html

<div style="width: 300px;"> 
  <div class="form-group"> 
    <label for="typeE"><b>Type</b></label> 
    <input type="text" class="form-control" id="typeE" name="typeE" [(ngModel)]="typeE" required> 
  </div> 
  <div class="btn-group"> 
    <button type="button" class="btn btn-success" (click)="searchEvenement()">Rechercher</button> 
  </div> 
</div> 
<ul> 
  <li *ngFor="let e of evenmt"> 
    <h4>{{e.typeE}} - {{e.prixE}} {{e.dateE}}</h4> 
  </li> 
</ul>

具体解决方案 #

1. 优先解决跨域（CORS）问题

302错误很大概率是浏览器的跨域策略限制导致的——Postman不受跨域规则约束所以能正常请求，但前端会被拦截。需要在SpringBoot后端配置CORS：

• 方法一：在接口控制器上添加注解
  在你的Evenement对应的Controller类或方法上添加@CrossOrigin注解：

  @RestController
  @CrossOrigin(origins = "http://localhost:4200") // 替换为你的Angular项目运行端口
  @RequestMapping("/evenement")
  public class EvenementController {
      // 你的接口方法
      @GetMapping("/evenements/{typeE}")
      public List<Evenement> getEvenementsByType(@PathVariable String typeE) {
          // 业务逻辑实现
      }
  }
  

• 方法二：全局CORS配置
  如果有多个接口需要跨域，可以配置全局CORS规则：

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

2. 修正前端Service的类型错误

在getEvenementByType方法中，你声明返回的是Promise<Evenement[]>（数组类型），但then里却把响应转为Evenement（单个对象），类型不匹配会导致后续*ngFor遍历出错，同时可能隐藏真实错误：

getEvenementByType(typeE: string): Promise<Evenement[]> { 
  return this.http.get(this.evensUrl_del + '/evenements/' + typeE, this.options) 
    .toPromise() 
    .then(response => response.json() as Evenement[]) // 修正为Evenement[]
    .catch(this.handleError); 
}

3. 检查接口路径匹配性

确认SpringBoot后端的接口路径和前端请求完全一致：

• 前端请求路径：http://localhost:8080/evenement/evenements/degustation
• 后端Controller的@RequestMapping是/evenement，接口方法的@GetMapping是/evenements/{typeE}，路径是匹配的，但如果后端有拦截器、安全框架（如Spring Security），需要确保该路径不会被重定向。

4. 添加错误捕获辅助调试

在searchEvenement方法中添加错误捕获，方便查看具体的错误详情：

searchEvenement(){ 
  this.evenementService.getEvenementByType(this.typeE)
    .then(evenmt => {
      this.evenmt = evenmt;
      console.log('搜索结果:', evenmt); // 打印结果确认数据格式
    })
    .catch(err => {
      console.error('搜索请求错误:', err);
      if(err.json) console.error('错误详情:', err.json()); // 打印响应体（如果存在）
    }); 
}

额外注意点 #

• 你的ver方法里的代码evenmt => this.evenmt = evenmt;是无效的，这只是定义了一个箭头函数但没有调用，需要根据实际需求调整逻辑。
• 确保Angular项目的运行端口和后端CORS配置的allowedOrigins一致（默认Angular项目运行端口是4200）。

内容的提问来源于stack exchange，提问作者BaNRoOt