当前位置： 移动技术网 > IT编程>开发语言>Java > React+Spring实现跨域问题的完美解决方法

React+Spring实现跨域问题的完美解决方法

2019年07月19日  | 移动技术网IT编程  | 我要评论

最近小编在学习react，在学习过程中遇到react+spring实现跨域问题，下面小编记录了整个问题过程，给大家做个参考。

react 跨域访问后台，默认是有跨域问题，并且火弧和谷歌浏览器，对跨域问题展示还不一样.

谷歌浏览器如下图：

此处状态是200，然而在response却没有任何信息，如下图

然而火弧浏览器，对该问题的描述，就清淅得多，

火弧浏览器告诉我们，跨域了，关于react跨域的帖子，网上也有相关帖子，搜索到的方法，大约都是如下解决方式：

如果你是通过creat-react-app构建的项目，请在package.json文件中的根目录下，添加"proxy": ""，如果你的项目，需要调用多个不同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实现跨域问题的完美解决方法，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网