CORS와 대응하여 페치 인

CORS와 대응하여 페치 인

저는 CORS를 완전히 처음 접하는 사람이고 다음과 같은 문제가 있습니다.

-스프링 부트에서 만든 REST 서비스(포트 8080)를 호출하는 create-react-app(포트 3000)을 사용하고 있습니다.저는 제 REST API에 JWT 인증을 추가했기 때문에 다른 것을 부르기 전에 인증을 해야 합니다.

문제는 SpringBoot 프로젝트 index.html(jwt 인증을 테스트하는 데 사용)에서 인증할 수 있지만, 이제 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();
            },....

Fetch(포트 3000)를 CORS로 반응합니다.

    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)
.....

반응 페치가 200 OK를 반환하는 동안, 저는 까다로운 응답을 받고 Json이라는 응답을 받을 수 없는 것 같습니다.내가 CORS 없이 했던 것과 같은 방식으로 토큰.제가 무엇을 빠뜨리고 있나요?

응답:

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, {
  mode: 'cors',
  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) {
...

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch 을 참조하십시오.

언급URL : https://stackoverflow.com/questions/48562406/trouble-with-fetch-in-react-with-cors