即使在根据文档配置了所有内容之后，我在尝试在我的站点上执行一些操作时仍然遇到 CORS 问题。
我正在使用教程制作 YouTube 克隆。到目前为止一切顺利，我设法覆盖并调整了其中不起作用的部分 \ 已被弃用（这包括在 SecurityConfig.java 上使用 filterChain 而不是 WebSecurityConfigureAdpter）。
但是，当我尝试请求端点（用于上传视频）时，当我单击上传按钮时，我收到 401 XHR 错误 - 与跨源问题有关。
在我的 SecurityConfig.java 上，一切看起来都设置正确。在 WebMvc 配置上，也允许来自任何地方的任何东西。
我试图在 SecurityConfig.java 中实现一个函数作为 Bean，以单独配置 cors（没有 WebMvcConfig 类），但它也没有用。我有点迷路了。
这个项目在前端运行角度。我添加了一小部分来识别用户是否已登录（登录后仅显示用户详细信息），并且用户已通过身份验证（登录后我可以显示用户详细信息）。
任何输入将不胜感激。此外，如果我在这里遗漏了任何内容来描述我的问题，我将很乐意编辑帖子并提供信息。
提前致谢！
安全配置.java
@Configuration
@EnableWebSecurity
public class SecurityConfig {
@Value("${spring.security.oauth2.resourceserver.jwt.issuer.uri}")
private String issuer;
@Value("${auth0.audience}")
private String audience;
@Bean
public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
http.authorizeRequests()
.anyRequest().authenticated()
.and()
.sessionManagement()
.sessionCreationPolicy(SessionCreationPolicy.STATELESS)
.and()
.cors(Customizer.withDefaults())
.oauth2ResourceServer()
.jwt();
return http.build();
}
@Bean
CorsConfigurationSource corsConfigurationSource() {
CorsConfiguration configuration = new CorsConfiguration();
configuration.setAllowedOrigins(Collections.singletonList("http://localhost:4200"));
configuration.setAllowedMethods(Arrays.asList("GET","POST", "PUT", "DELETE", "PATCH", "OPTIONS"));
configuration.setExposedHeaders(Arrays.asList("Authorization", "content-type"));
configuration.setAllowedHeaders(Arrays.asList("Authorization", "content-type"));
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**", configuration);
return source;
}
@Bean
public JwtDecoder jwtDecoder(){
NimbusJwtDecoder jwtDecoder = JwtDecoders.fromOidcIssuerLocation(issuer);
OAuth2TokenValidator<Jwt> audienceValidator = new AudienceValidator(audience);
OAuth2TokenValidator<Jwt> withIssuer = JwtValidators.createDefaultWithIssuer(issuer);
OAuth2TokenValidator<Jwt> withAudience = new DelegatingOAuth2TokenValidator<>(withIssuer);
jwtDecoder.setJwtValidator(withAudience);
return jwtDecoder;
}
}
WebMvcConfig.java 包 com.pablo.portfolio.youtubeclone.config;
@EnableWebMvc
@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry corsRegistry){
corsRegistry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("GET", "PUT","POST","DELETE","PATCH","OPTIONS")
.allowedHeaders("*")
.maxAge(3600);
}
}
VideoController.java
package com.pablo.portfolio.youtubeclone.controller;
@RestController
@CrossOrigin
@RequestMapping("/api/videos")
@RequiredArgsConstructor
public class VideoController {
private final VideoService videoService;
@CrossOrigin
@PostMapping
@ResponseStatus(HttpStatus.CREATED)
public UploadVideoResponse uploadVideo(@RequestParam("file")MultipartFile file){
return videoService.uploadVideo(file);
}
@CrossOrigin
@PostMapping("/thumbnail")
@ResponseStatus(HttpStatus.CREATED)
public String uploadThumbnail
(@RequestParam("file")MultipartFile file, @RequestParam("videoId") String videoId){
return videoService.uploadThumbnail(file, videoId);
}
@CrossOrigin
@PutMapping
@ResponseStatus(HttpStatus.OK)
public VideoDto editVideoMetaData(@RequestBody VideoDto videoDto){
return videoService.editVideo(videoDto);
}
@CrossOrigin
@GetMapping("/{videoId}")
public VideoDto getVideoDetails(@PathVariable String videoId){
return videoService.getVideoDetails(videoId);
}
}
我也在用 React Native/JSX 制作一个 youtube 克隆。
看起来你正在使用 Java，但我在尝试实现时也遇到了同样的错误。我使用的是 RapidAPI 的 youtube API。