axios 크로스 필드 요청 오류 해결

오류 메시지:
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:9000' is therefore not allowed access. The response had HTTP status code 403
전단 프레임 워 크 가 발전 함 에 따라 현재 전후 단 데이터 분 리 는 이미 추세 가 되 었 다.즉,전단 은 ajax 로 백 엔 드 의 데이터 합성 페이지 를 요청 하고 백 엔 드 는 데이터 인터페이스 만 제공 하여 데 이 터 를 주면 된다.장점 은 전단 프로그래머 가 더 이상 자신의 로 컬 에 웹 서버 를 구축 하지 않 아 도 되 고 전단 도 백 엔 드 문법 을 알 필요 가 없 으 며 백 엔 드 도 전단 문법 을 알 필요 가 없다 는 것 이다.그러면 개발 배 치 를 간소화 하고 협력 난이 도 를 낮 출 수 있다.
일반적인 GET,POST,PUT,DELETE 요청 은 간단 한 요청(OPTIONS 요청 에 비해)이지 만 OPTIONS 는 좀 특별 합 니 다.서버 에 요청 을 보 내야 합 니 다.제 가 요청 하 시 겠 습 니까?데 이 터 를 보 내 드 리 겠 습 니 다.
Vue 프로젝트 에서 Http 서 비 스 는 Axios 를 사용 합 니 다.바로 OPTIONS 요청 을 사용 합 니 다.
헤더 에 만'access-control-Allow-Origin'을 추가 하면 문 제 를 해결 할 수 없습니다.오 류 는 글 의 시작 과 같 습 니 다.
여기 에는 OPTIONS 에 대한 추가 처리 요청 백 스테이지 가 필요 합 니 다.
본 고 는 Spring MVC 를 예 로 들 면:
차단기 클래스 추가:

public class ProcessInterceptor implements HandlerInterceptor {

  @Override
  public boolean preHandle(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Object o) throws Exception {
    httpServletResponse.setHeader("Access-Control-Allow-Origin", "*");
    httpServletResponse.setHeader("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With");
    httpServletResponse.setHeader("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
    httpServletResponse.setHeader("X-Powered-By","Jetty");

    String method= httpServletRequest.getMethod();
    if (method.equals("OPTIONS")){
      httpServletResponse.setStatus(200);
      return false;
    }
    System.out.println(method);
    return true;
  }
  @Override
  public void postHandle(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Object o, ModelAndView modelAndView) throws Exception {
  }
  @Override
  public void afterCompletion(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Object o, Exception e) throws Exception {
  }
}

spring-mvx.xml 에 Spring 차단 기 를 설정 합 니 다:

<mvc:interceptors> 
    <bean class="cn.tfzc.ssm.common.innterceptor.ProcessInterceptor"></bean> 
  </mvc:interceptors> 

이로써 문 제 는 이미 해결 되 었 다.

이상 의 이 완벽 한 해결 axios 크로스 도 메 인 요청 오류 의 문 제 는 바로 편집장 이 여러분 에 게 공유 한 모든 내용 입 니 다.여러분 에 게 참고 가 되 고 여러분 들 이 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.