前后端分离之跨域请求CORS

一、前端采用iview-admin 附项目github链接https://github.com/iview/iview 2.0版

1.安装node.js https://nodejs.org/en/download/

在vscode里导入项目

npm install --------> npm run dev ------------>npm run build(打包用)

成功之后前后端分离之跨域请求CORS

util.js 封装 get post方法，方便调用

const ajaxUrl = {
    MES:
      env === "development"
        ? "http://localhost:8081"
        : env === "test"
        ? "http://11.11.111.111:8080"
        : env === "production"
        ? "http://11.11.111.111:8080"
        : "http://11.11.111.111:8080"
};

util.AxiosGet = function(url, data, vm, callback) {
    let requestUrl = "";
    requestUrl = ajaxUrl["MES"] + url;
    axios
      .get(requestUrl, { params: data })
      .then(function(response) {
        let msg = response.data;
        // let flag = true;// 区分是否通过
        // if (typeof (response.data.message) === 'object') {
        //     flag = true;
        // } else if (typeof (JSON.parse(response.data.message).errorMsg) !== 'undefined') {
        //     flag = false;
        // }
        if (msg.code || requestUrl.indexOf("_CA")) {
          callback(msg, vm);
        } else {
          util.logOut(vm);
          // if (!(vm.$route.path ==='/' || vm.$route.path ==='/login')) {
          //     vm.$Message.error('连接超时，请重新登录。');
          // }
        }
      })
      .catch(function(error) {
        catchError(error, vm);
      });
  };
  util.AxiosPost = function(url, data, vm, callback) {
    let requestUrl = "";
    requestUrl = ajaxUrl["MES"] + url;
    let config = {};
  
    axios
      .post(requestUrl, data, config)
      .then(function(response) {
        let msg = response.data;
        if (
          msg.code &&
          typeof JSON.parse(response.data.message).errorMsg === "undefined"
        ) {
          callback(msg, vm);
        } else {
          util.logOut(vm);
          // if (!(vm.$route.path ==='/' || vm.$route.path ==='/login')) {
          //     vm.$Message.error('连接超时，请重新登录。');
          // }
        }
      })
      .catch(function(error) {
        catchError(error, vm);
      });
  };

新增一个发请求方法：请求发送到第一篇博客上

 shows (){
            let url = "/myssh/use!addUser.action";
            let username= 'aaa';
            util.AxiosGet(url,{username:username},this,function(d,vm){
                    
            });
        }

后台用的ssh框架服务端口本地8081

jar包：cors-filter-1.7.1.jar java-property-utils-1.9.1.jar

web.xml配置过滤器

<filter>
	<display-name>CORSFilter</display-name>
	<filter-name>CORSFilter</filter-name>
	<filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
</filter>
<filter-mapping>
	<filter-name>CORSFilter</filter-name>
	<url-pattern>/*</url-pattern>
</filter-mapping>

新增类CORSFilter

public class CORSFilter extends OncePerRequestFilter{

	@Override
	 protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException {
        response.addHeader("Access-Control-Allow-Origin", "*");
        response.addHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
        response.addHeader("Access-Control-Allow-Headers", "Content-Type");
        response.addHeader("Access-Control-Max-Age", "1800");//30 min
        filterChain.doFilter(request, response);
    }
}

前后端分离之跨域请求CORS

相关推荐