无法使用我的 Angular 应用程序在 spring 启动中启用 CORS

Question

I've tried the options suggested, for some reason my Angular client on port 4200 can not make the call to my spring boot app on port 8081. I am unsure if its a CORS issue or if I am missing something with my HttpClient on my front end...

my component:

import { Component, OnInit } from '@angular/core';
import { HttpService } from './../http.service';
import { Video } from './../video';


@Component({
  selector: 'app-video-details-upload',
  templateUrl: './video-details-upload.component.html',
  styleUrls: ['./video-details-upload.component.scss']
})
export class VideoDetailsUploadComponent implements OnInit {

 video: Video = new Video(); 

  constructor(private httpService: HttpService) { }

  ngOnInit() {
  }

  saveVideo() {
    return this.httpService.postVideo(this.video);
  }

my app.module and my http.service class:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { VideoDetailsUploadComponent } from './video-details-upload/video-details-upload.component';

@NgModule({
  declarations: [
    AppComponent,
    VideoDetailsUploadComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }



import { Injectable } from '@angular/core';
import { Video } from './video';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class HttpService {

  urlVid = 'http://localhost:8081/video';

  constructor(private http: HttpClient) { }

  public postVideo(video: Video) {
    return this.http.post(this.urlVid, video, {responseType: 'text' as 'json'});
  }
}

My Video is a simple typescript class that is equivalent to my video POJO to be created by my springboot app...:

@Entity
@Table(name="video")
public class Video {
    @Id
    private long id;
    private String title;
    private long duration;
    private String location;
    private String subject;
    private String contentType;

...and iv added CORS to my controller, as well as creating a config class(i tried them both...):

@RestController
@CrossOrigin(origins = "http://localhost:4200")
public class VideoController {
    
    @Autowired
    VideoRepository videoRepository;
    
    private List<Video> videos = new ArrayList<Video>();

    @PostMapping("/video")
    public Video saveVideo(@RequestBody Video vid) {
        System.out.println("iv at least MADE IT HERE to the spboot controller....");

-> iv ommitted my logic after here because iv not been able to get this far, I dont see why not, also, ill include the config class i abruptly added but to no avail...

@Configuration
public class AppConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:4200")
                .allowedMethods("POST");
    }
}

...any assistance very much appreciated, I have spent too long trying to fix this...

Answer 1

In the main class, add the following config. The origin is set to "http://localhost:4200" , please configure your origin and headers

@Bean
CorsConfigurationSource corsConfigurationSource() {
    CorsConfiguration configuration = new CorsConfiguration();
    configuration.setAllowedOrigins(Arrays.asList("http://localhost:4200"));
    configuration.setAllowedMethods(Arrays.asList("GET", "POST", "OPTIONS", "DELETE", "PUT", "PATCH"));
    configuration.setAllowedHeaders(Arrays.asList("X-Requested-With", "Origin", "Content-Type", "Accept",
            "Authorization", "X-Authorization-Firebase"));
    configuration.setAllowCredentials(true);
    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    source.registerCorsConfiguration("/**", configuration);
    return source;
}