CORS 정책: 실행 전 요청에 대한 응답이 액세스 제어 확인에 실패합니다. 요청에 'Access-Control-Allow-Origin' 헤더가 없습니다.

Question

그래서 프론트엔드와 백엔드를 조금씩 가지고 놀아보았습니다. 프런트엔드에서 서버로 데이터를 보내려고 하면

라는 메시지가 나타납니다.

원본 'http://localhost:3000'의 'http://test.localhost/login'에서 XMLHttpRequest에 대한 액세스가 CORS 정책에 의해 차단되었습니다. 실행 전 요청에 대한 응답이 실패했습니다. 액세스 제어 확인: 'Access-Control'이 없습니다. 요청한 리소스에 Allow-Origin' 헤더가 있습니다

내 axios onClick 설정은 다음과 같습니다.

으아아아

내 axiosClient는:

으아아아

백엔드의 내 코어 구성은

export const login = (email, password) => {
  return axiosClient.post('/login', { email, password })
    .then(response => {
      // handle successful login
      return response.data;
    })
    .catch(error => {
      // handle failed login
      throw error;
    });
};

Answer 1

cors.php에 이렇게 localhost IP를 포함시켜 보셨나요?

으아악

이 방법이 작동하지 않으면 이 구성을 사용해 보세요

으아악

그리고 Kernel.php에서 이 줄을 주석으로 처리하세요. 하지만 이 구성은 어디에서든 요청을 허용하므로 배포하기 전에 백엔드가 선호하는 허용 소스로부터 요청을 수신하는지 확인하세요.

으아악