CORS 策略阻止了从源获取的访问：它没有 HTTP ok 状态答案

【问题标题】：Access to fetch at from origin has been blocked by CORS policy: It does not have HTTP ok statusCORS 策略阻止了从源获取的访问：它没有 HTTP ok 状态
【发布时间】：2022-01-31 22:23:55
【问题描述】：

我想调用后端 (java/springboot) 在我的应用程序上创建登录功能。我从前端（角度）调用一个 jwtoken 到后端。后端生成没有问题，前端收到好的jwtoken。

https://www.example.com/api/v1/authenticate

回复：

jwtToken: "eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJzdG9ja21hbmFnZXIiLCJleHAiOjE2NDMzODc1NjQsImlhdCI6MTY0MzM2OTU2NH0.mYl10_v5Dm3S6K0lM5uBOLs1x2rYwC76ZkJ9w6-QOTw1tE7xjiKxMIOiiU6QgwsKxqtDmz31aCEA4ePY2IzkUQ"

到目前为止，一切都很好

Request URL: https://www.example.com/api/v1/authenticate
Request Method: POST
Status Code: 200  (from service worker)
Referrer Policy: strict-origin-when-cross-origin

但我想在调用的标题中获取一个具有身份验证的用户

https://www.example.com/api/v1/users/find

Authorization: Bearer eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJzdG9ja21hbmFnZXIiLCJleHAiOjE2NDMzODc1NjQsImlhdCI6MTY0MzM2OTU2NH0.mYl10_v5Dm3S6K0lM5uBOLs1x2rYwC76ZkJ9w6-QOTw1tE7xjiKxMIOiiU6QgwsKxqtDmz31aCEA4ePY2IzkUQ
Payload : {username: "example", password: "password"}

不幸的是，出现了 CORS 错误：

Access to fetch at 'https://www.example.com/api/v1/users/find' from origin 'https://www.example.com/api/v1/users/find' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

我需要一些帮助，请:sweat_smile:

【问题讨论】：

你的代码会很有趣。
Cors 由您的服务器在您的 api 端启用，以便服务器域以外的域可以与您的 api 交互。

标签： angular spring-boot heroku cors netlify

【解决方案1】：

我通过更新我的后端解决了这个问题 ;-) 我在configure()方法中添加httpSecurity.cors()；

@EnableWebSecurity
@RequiredArgsConstructor
@EnableGlobalMethodSecurity(prePostEnabled = true)
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {

    @Override
    protected void configure(final HttpSecurity httpSecurity) throws Exception {
        httpSecurity.csrf()
                    .disable()
                    .authorizeRequests()
                    .mvcMatchers("/api/v1/authenticate")
                    .permitAll()
                    .anyRequest()
                    .authenticated()
                    .and()
                    .exceptionHandling()
                    .authenticationEntryPoint(this.jwtAuthenticationEntryPoint)
                    .and()
                    .sessionManagement()
                    .sessionCreationPolicy(SessionCreationPolicy.STATELESS);

        httpSecurity.cors();

        httpSecurity.addFilterBefore(this.jwtRequestFilter, UsernamePasswordAuthenticationFilter.class);
    }
}

后端现在可以getHeaders，所以授权。

【讨论】：

【解决方案2】：

我假设您正在使用命令“ng serve”在开发模式下运行您的应用程序，如果是这样，那么为了避免这个 CORS 问题，您可以通过代理支持调用您的后端（java/springboot）REST api。请阅读 Angular 文档中的以下部分以了解有关代理的更多信息。

https://angular.io/guide/build#proxying-to-a-backend-server

【讨论】：

确实我使用本地代理来调用后端。我在本地没有问题。当我部署到生产环境时，我遇到了这个问题。我使用 Netlify 进行前端部署，使用 Heroku 进行后端部署。错误消息：“从源 'frontend.netlify.com' 获取 'backend.heroku.com/api/v1/users/find' 的访问已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：它没有 HTTP ok 状态。”我需要一些帮助来解决这个问题，因为这是一个长期存在的问题......
问题似乎来自后端无法获取请求的标头。 request.getHeader('授权') = null。但是请求的标头中有一个自动化。 Authorization: Bearer eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJzdG9ja21hbmFnZXIiLCJleHAiOjE2NDMzODc1NjQsImlhdCI6MTY0MzM2OTU2NH0.mYl10_v5Dm3S6K0lM5uBOLs1x2rYwC76ZkJ9w6-QOTw1tE7xjiKxMIOiiU6QgwsKxqtDmz31aCEA4ePY2IzkUQ.所以我不明白这个问题^^