React+Spring 크로스 도 메 인 문제 의 완벽 한 해결 방법

최근 에 소 편 은 react 를 공부 하 는 과정 에서 React+Spring 이 크로스 오 버 문 제 를 만 났 습 니 다.다음은 전체 문제 과정 을 기록 하여 참고 하 겠 습 니 다.
react 크로스 도 메 인 방문 배경,기본 값 은 크로스 도 메 인 문제 이 고 화 호 와 구 글 브 라 우 저 는 크로스 도 메 인 문제 에 대한 전시 가 다 릅 니 다.
구 글 브 라 우 저 는 다음 과 같다.

이 상 태 는 200 이지 만 Response 에 서 는 아무런 정보 가 없습니다.다음 그림 입 니 다.

그러나 화 호 브 라 우 저 는 이 문제 에 대한 설명 이 아주 맑 습 니 다.

화 호 브 라 우 저 는 도 메 인 을 뛰 어 넘 었 습 니 다.react 도 메 인 을 뛰 어 넘 는 게시 물 에 대해 인터넷 에 도 관련 게시 물이 있 습 니 다.검색 하 는 방법 은 모두 다음 과 같은 해결 방식 입 니 다.
creat-react-app 을 통 해 구 축 된 프로젝트 라면 package.json 파일 의 루트 디 렉 터 리 에"proxy"를 추가 하 십시오."http://api.xxxx.com"프로젝트 에 여러 개의 ip 인 터 페 이 스 를 호출 해 야 한다 면 다음 설정 을 사용 하 십시오.

"proxy": {
  "/api/RoomApi": {
   "target": "http://open.douyucdn.cn",
   "changeOrigin":true
  },
  "/api/v1":{
   "target":"http://capi.douyucdn.cn",
   "changeOrigin":true
  }
  }

설정 이 완 료 된 후에 도 인 터 페 이 스 를 다시 방문 하면 똑 같은 크로스 도 메 인 문제 가 발생 합 니 다.recat 의 설정 이 크로스 도 메 인 문 제 를 해결 하지 못 한 이상 저 는 생각 을 spring 으로 옮 겨 서 spring 에서 크로스 도 메 인 을 처리 하 겠 습 니 다.

package com.gg.interceptor;
import java.util.ArrayList;
import java.util.List;
import java.util.Vector;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.web.servlet.HandlerInterceptor;
import org.springframework.web.servlet.ModelAndView;
public class ProcessInterceptor implements HandlerInterceptor{
 @Override
 public boolean preHandle(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Object handler)
   throws Exception {
  // TODO Auto-generated method stub 
  //         http://localhost:8000,http://localhost:8000
  List<String> whileList = new Vector<String>(); 
  whileList.add("http://127.0.0.1:8000");
  whileList.add("http://localhost:8000");
  String clientIp = httpServletRequest.getHeader("origin");
  boolean status = false;
  for(String ip : whileList) {
   if(clientIp!=null&&clientIp.equals(ip)) {
    status = true;
    break;
   }
  }
  /**
   *        httpServletResponse.setHeader("Access-Control-Allow-Origin","*");     ，          ，       ip， ：http://127.0.0.1:8000 
   * */
  httpServletResponse.setHeader("Access-Control-Allow-Origin",status?clientIp:null); 
  //      
  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"); 
  httpServletResponse.setHeader("Access-Control-Allow-Credentials","true");
  String method= httpServletRequest.getMethod(); 
  if (method.equals("OPTIONS")){ 
   httpServletResponse.setStatus(200); 
   return false; 
  } 
  System.out.println(method+",status:"+status+",clientIp:"+clientIp); 
  return true; 
 }
 @Override
 public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler,
   ModelAndView modelAndView) throws Exception {
  // TODO Auto-generated method stub
 }
 @Override
 public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex)
   throws Exception {
  // TODO Auto-generated method stub
 }
}

react 클 라 이언 트 코드 는 다음 과 같 습 니 다.
Model 계층 js 코드:

*login({ payload }, { call, put }){
  let formData = new FormData();
  formData.append("loginId",payload.loginId);//  
  formData.append("passWord",payload.passWord);//  
  const response = yield call(requestGuangGao, formData); 
  yield put({
  type: 'changeLoginStatus',
  payload: response,
  });
 },

api 계층 js 코드:

export async function requestGuangGao(formData){
 // let formData = new FormData();
 // formData.append("loginId",params.loginId);
 // formData.append("passWord",params.passWord);
 console.log("requestGua >url :" );
 return request('http://127.0.0.1:8080/guanggao/userController/login.do', {
 method: 'POST', 
 mode: 'cors', 
 body:formData,
 }); 
}

아래 설정 을 통 해 react 크로스 도 메 인 문 제 를 처리 할 수 있 습 니 다.
총결산
위 에서 말 한 것 은 편집장 님 께 서 소개 해 주신 React+Spring 이 크로스 오 버 문 제 를 해결 하 는 완벽 한 방법 입 니 다.여러분 께 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.편집장 님 께 서 제때에 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!