Java 角度5：飞行前的响应具有无效的HTTP状态代码403

当我向服务器发送POST请求时，我收到一个错误：

Failed to load http://localhost:8181/test: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access. The response had HTTP status code 403.

Response for preflight has invalid HTTP status code 403.

后端是用JavaSpring编写的。 我创建测试的方法：

createTest() {
    const body = JSON.stringify({
      'description': 'grtogjoritjhio',
      'passingTime': 30,
      'title': 'hoijyhoit'
    });

    const httpOptions = {
      headers: new HttpHeaders({
          'Content-Type': 'application/json',
          'Accept': 'application/json'
        }
      )
    };

    return this._http.post(`${this._config.API_URLS.test}`, body, httpOptions)
      .subscribe(res => {
        console.log(res );
      }, error => {
        console.log(error);
    });
  }

Get方法可以工作，但Post不能。他们都是大摇大摆的邮差。我改变了很多次POST方法。我的代码中的标题不起作用，但我通过扩展到Google Chrome解决了这个问题。只有一个错误：

Failed to load http://localhost:8181/test: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access. The response had HTTP status code 403.

Response for preflight has invalid HTTP status code 403.

---

在我看来，这不是角度问题。请告诉我我或我的朋友（谁编写了后端）如何解决这个问题。

问题：

对于任何跨来源POST请求，浏览器将首先尝试执行选项调用，如果且仅当该调用成功时，它将执行真正的POST调用。但在您的情况下，选项调用失败，因为没有

'Access-Control-Allow-Origin'

响应头。因此，实际调用将不会完成

SLOUTION:

为此，您需要在服务器端添加CORS配置，以设置跨源请求所需的适当标头，如：

• response.setHeader（“访问控制允许凭据”，“true”）

• response.setHeader（“访问控制允许头”，“内容类型，如果不匹配”）

• response.setHeader（“访问控制允许方法”、“POST、GET、OPTIONS”）

• response.setHeader（“访问控制允许原点”，“*”）

• response.setHeader（“访问控制最大年龄”，“3600”）

---

您需要确保Spring接受CORS请求

此外，如果您已经应用了Spring security&例如为您的API应用了require authorization Header，则（仅当您需要使您的应用程序支持CORS时）您应该在Spring security配置文件中从授权中排除选项调用

它将是这样的：

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

  @Override
  protected void configure(HttpSecurity http) throws Exception {

  @Override
  public void configure(WebSecurity web) throws Exception {
    // Allow OPTIONS calls to be accessed without authentication
    web.ignoring()
        .antMatchers(HttpMethod.OPTIONS,"/**")

注:

---

在生产环境中，可能最好使用反向代理（如nginx）&不允许浏览器直接调用API，在这种情况下，您不需要允许如上所示的选项调用。

我最近遇到了与Angular完全相同的问题。发生这种情况是因为一些请求正在触发飞行前请求，例如

补丁

、

删除

、

选项

等。这是web浏览器中的一项安全功能。它对斯威格和邮递员有效，只是因为他们没有实现这样的功能。要在Spring中启用CORS请求，您必须创建一个返回

WebMVCConfiguer

对象的bean。不要忘记

@Configuration

，以防您为此制作了一个额外的类

    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**").allowedMethods("GET", "POST", "PUT", "DELETE").allowedOrigins("*")
                        .allowedHeaders("*");
            }
        };
    }

---

当然，您可以根据自己的需要进行调整。

您可以在此处共享chrome网络选项卡的完整详细信息，因为这将有助于查看是否有合适的标题出现？我不知道为什么这只狗会重复我这么多次。但我总是忘记在“响应”标题中设置CORS属性。如果您在“请求”标题上这样做，您将继续遇到问题……这发生在我们中最好的人身上。