React+spring How to record cross-domain problems

React cross-domain access to the background, the default is a cross-domain problem, and the fire arc and Google Browser, the cross-domain problem display is not the same.

Google browser such as:

The status here is 200, but there is no information in response, such as

However, the fire Arc browser, the description of the problem, is much clearer,

The fire Arc Browser tells us that cross-domain, about react cross-domain posts, online also have related posts, the search method, about is the following solution:

If you are building a project through Creat-react-app, add "proxy" in the root directory of the Package.json file: "http://api.xxxx.com", if your project needs to invoke multiple interfaces of different IPs, Please use the following configuration:

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

For Antd-pro projects, you need to add the. roadhogrc file under the Package.json's equivalent directory, with the following code:

 
 {
      "entry": "src/index.js",
      "extraBabelPlugins": [
        "transform-runtime",
        "transform-decorators-legacy",
        "transform-class-properties",
        ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": true }]
      ],
      "env": {
        "development": {
          "extraBabelPlugins": [
            "dva-hmr"
          ]
        }
      },
      "externals": {
        "g2": "G2",
        "g-cloud": "Cloud",
        "g2-plugin-slider": "G2.Plugin.slider"
      },
      "ignoreMomentLocale": true,
      "theme": "./src/theme.js",
      "proxy": {
        "/api": {
          "target": "http://api.xxxx.com/",
          "changeOrigin": true
        }
      }
    }

After the configuration is complete, again to access the interface, or the same cross-domain problem, since the Recat configuration, not solve the cross-domain problem, I took the idea to spring, in spring to deal with cross-domain, in the back-end program to add an interceptor,

 
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
        // Specify the whitelisted domain name 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;
            }
        }
        /**
         * The online solution is httpServletResponse.setHeader("Access-Control-Allow-Origin","*"); After setting, I found that I still can't handle cross-domain problems. I need to specify an ip, such as: http://127.0.0.1 :8000
         * */
        httpServletResponse.setHeader("Access-Control-Allow-Origin",status?clientIp:null);
        / / Response header settings
        httpServletResponse.setHeader("Access-Control-Allow-Headers", "Content-Type, Content-Length, Authorization, Accept, X-Requested-With");
        / / response type
        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
        
    }

}

The Spring-servlet.xml configuration is as follows:

 
<mvc:interceptors>  
       <bean class="com.gg.interceptor.ProcessInterceptor"></bean>  
   </mvc:interceptors>  

The React client code is as follows:

 
Model layer js code:
*login({ payload }, { call, put }){
       Let formData = new FormData();
       formData.append("loginId",payload.loginId);//account
       formData.append("passWord",payload.passWord);//password
       Const response = yield call(requestGuangGao, formData);
       Yield put({
         Type: 'changeLoginStatus',
         Payload: response,
       });
     },

Api layer js code:
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,
   });
}

The React cross-domain problem is handled by the following settings.