Javascript 与CORS进行反应时遇到的问题

我是CORS的新手，我有以下问题：

-我正在使用CreateReact应用程序（端口3000），它调用SpringBoot中的一些REST服务（端口8080）。我将JWT auth添加到我的REST API中，所以现在我必须在调用其他任何东西之前进行身份验证

问题是，我可以在我的SpringBoot项目index.html（我用来测试jwt auth）中进行身份验证，但是现在我在React上调用了/auth POST，我得到了一个200 OK，但我似乎在响应中的任何地方都找不到令牌

SpringBoot index.html

function doLogin(loginData) {
        $.ajax({
            url: "/auth",
            type: "POST",
            data: JSON.stringify(loginData),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data, textStatus, jqXHR) {
                setJwtToken(**data.token**); //I can get the token without a problem
                $login.hide();
                $notLoggedIn.hide();
                showTokenInformation();
                showUserInformation();
            },....

使用CORS响应提取（端口3000）

    fetch(url, {
      crossDomain:true,
      method: 'POST',
      headers: {'Content-Type':'application/json'},
      body: JSON.stringify({
        username: user,
        password: pass,
      })
    }).then((responseJson) => {
      console.log(responseJson);
      const tokenInfo = this.state.token;

      if(tokenInfo !== undefined)
.....

当react fetch返回一个200 OK时，我得到了一个挑剔的响应，似乎不能像没有CORS时那样得到responseJson.token。 我错过了什么

答复：

Response {type: "cors", url: "http://localhost:8080/auth", redirected: false, status: 200, ok: true, …}

欢迎任何帮助

提前谢谢。 豪尔赫

编辑：

@Override
protected void configure(HttpSecurity httpSecurity) throws Exception {
    httpSecurity
            // we don't need CSRF because our token is invulnerable
            .csrf().disable()

            .exceptionHandling().authenticationEntryPoint(unauthorizedHandler).and()

            // don't create session
            .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS).and()

            .authorizeRequests()
            //.antMatchers(HttpMethod.OPTIONS, "/**").permitAll()

            // allow anonymous resource requests
            .antMatchers(
                    HttpMethod.GET,
                    "/",
                    "/*.html",
                    "/favicon.ico",
                    "/**/*.html",
                    "/**/*.css",
                    "/**/*.js"
                    ,"/rates/**"
            ).permitAll()
            //Allows the user to authenticate
            .antMatchers("/auth/**").permitAll()
            .anyRequest().authenticated();

    // Custom JWT based security filter
    httpSecurity
            .addFilterBefore(authenticationTokenFilterBean(), UsernamePasswordAuthenticationFilter.class);

    // disable page caching
    httpSecurity
            .headers()
            .frameOptions().sameOrigin()
            .cacheControl();
}

---

您应该首先使用

.json（）

转换获取响应。它返回一个承诺，因此您可以这样使用它：

fetch(url, {
  crossDomain:true,
  method: 'POST',
  headers: {'Content-Type':'application/json'},
  body: JSON.stringify({
    username: user,
    password: pass,
  })
})
  .then(response => response.json())
  .then(responseJson => {
    console.log(responseJson);
    const tokenInfo = this.state.token;
    if (tokenInfo !== undefined) {
...

---

请参阅。

Post您的spring安全配置将其添加到Post中，这是您想要的配置吗？您的控制器允许CORS吗？我认为，您需要特别注释一个控制器，以允许CORS使用

@CrossOrigin（origins=）http://localhost:9000“”

作为示例。是的，我的控制器会：@CrossOrigin（origins=“）这就是诀窍！我甚至没有想到这一点，因为我的工作就是这样。这对于发布响应来说是特别的吗？顺便说一句，非常感谢！它应该以相同的方式工作，因为resolve承诺在这两种情况下都会收到响应对象。我需要查看代码才能猜出它在这种情况下工作的原因。