ant design pro 引入自己封装的axios 并且后台springboot过滤器实现跨域

内容不较多，因为时间的缘故来不及详细的整理，可以挑出一些需要的部分

废话不多说，直接贴代码

这是我封装的axios工具

import JsonP from 'jsonp'
import axios from 'axios'
import { notification } from 'antd'
import Global from '@/utils/global/global'


export default class Axios {
    
    static jsonp(options) {
        return new Promise((resolve, reject) => {
            JsonP(options.url, {
                param: 'callback'
            }, function (err, response) {
                if (response.status == 'success') {
                    resolve(response);
                } else {
                    reject(response.messsage);
                }
            })
        })
    }

    static ajax(options){
        let baseApi = Global.base.URL_PATH;
        return new Promise((resolve,reject)=>{
            axios({
                url:options.url,
                method:'POST',
                baseURL:baseApi,
                // timeout:5000, //5秒无响应报异常
                params: options.data,
                withCredentials: true
            }).then((response)=>{
               let data = response.data;
                if (data.status == 'exception'){  
                    if(data.desc!=''&&data.desc!=null){
                        notification.error({
                            message:'出错啦!',
                            description:'请联系系统管理员'
                        })
                    }else if(data.status == 'notlogin'){
                        notification.warning({
                            message:'登陆提醒!',
                            description:'请先登陆系统'
                        })
                    }
                    reject(data);              
                }else{
                    resolve(data); 
                }
            })
        });
    }
}

上面用到Global

module.exports = {
    base:{
       //服务器端ip地址
        //开发环境
        URL_PATH:'http://localhost',
    },
    user:{
        //正常(用户状态正常||可创建下级)
        USER_STATUS_ON:0,
        //封禁(用户状态封禁||不可创建下级)
        USER_STATUS_OFF:1,
    },
};

前端axios使用例子

import React from 'react';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import { Table, Row, Col, Card, Button, Input, Form, Select, Badge } from 'antd';
import axios from '@/utils/axios';
import Util from '@/utils/util/util';
import {DelModelButton} from '@/components/mycomponents/ModelButton';
import styles from './TableList.less';

const Search = Input.Search;
const FormItem = Form.Item;
const  SelectOption = Select.Option;


/**
 * 日志工作分类列表
 */
 class LogTypeTable extends React.Component{
     
    state={
        selectedRowKeys:[],
        loading:false,
        dataSource:null,
        pageIndex:1,
      }
  
      //页面渲染时加载数据
      componentDidMount(){
        this.getDataSource();
      }
      getDataSource = ()=>{
        //将selectedRowKeys清空
        this.state.selectedRowKeys = [];
        axios.ajax({
          url:'/type/selectListPost',
          data:{
            pageIndex:this.state.pageIndex,
            ...this.state.searchDate
          }
        }).then((res)=>{
            let data = res.data;
            this.setState({
              dataSource:data.list,
              pagination:Util.pagination(data,(current)=>{
                this.state.pageIndex = current;
                this.getDataSource();
              })
            })
        })
      }
      //多选框点击事件
  handleSelectRows = (rows) => {
      this.setState({
        selectedRowKeys: rows,
      });
  };

  //点击搜索的方法
  handleSearch = ()=>{
    let searchDate = this.props.form.getFieldsValue();
    this.state.searchDate = {...searchDate};
    this.getDataSource();
  }

  //搜索重置的方法
  handleFormReset = () => {
    const { form } = this.props;
    form.resetFields();
    this.setState({
      searchDate: {},
    });
  };

  renderSimpleFrom(){
      const{getFieldsValue}= this.props.form;
      return(
        <Form layout="inline">
          <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
            <Col md={6} sm={24}>
              <FormItem label="日志分类">
                {getFieldDecorator('manufacturerName')(<Input placeholder="请输入日志分类" allowClear={true} onPressEnter={this.handleSearch}/>)}
              </FormItem>
            </Col>
            <span className={styles.submitButtons}>
                <Button type="primary" htmlType="submit" onClick={this.handleSearch}>
                  查询
                </Button>
                <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
                  重置
                </Button>
              </span>
            </Row>
        </Form>
      )
  }
  render(){
    const columns=[{
      title:'日志分类名称',
      dataIndex:'name',
      align:'center',
      key:'name',
  }]
    const rowSelection = {
        selectedRowKeys:this.state.selectedRowKeys,
        onChange: this.handleSelectRows,
      };

      return(
        <PageHeaderWrapper title="日志分类列表">
          <Card bordered={false}>
                  <div className={styles.tableList}>
                    <div className={styles.tableListOperator}>
                    <Row>
                      <Col xs={6} sm={2}>
                        <Button icon="plus" type="primary">
                            批量导入
                        </Button>
                      </Col>
                        {this.state.selectedRowKeys.length > 0 && (
                          <Col xs={4} sm={1} offset={1}>
                            <span>
                            <DelModelButton url='/type/delLogType' 
                              data={{'ids':this.state.selectedRowKeys.toString()}} callback={this.getDataSource} 
                              size='default'/>
                            </span>
                          </Col>
                        )}
                    </Row>
                    </div>
                      <Table 
                      bordered
                      loading={this.state.loading}
                      rowSelection={rowSelection}
                      rowKey={item=>item.logType}
                      columns={columns} 
                      dataSource={this.state.dataSource} 
                      pagination={this.state.pagination}
                      />
                    </div>
          </Card>                     
      </PageHeaderWrapper>
      )
  }
}
export default Form.create()(LogTypeTable);

后端springboot的过滤器写法

package com.wulianwang.manage.config.filter;

import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;

import com.alibaba.fastjson.JSON;
import com.wulianwang.manage.model.system.UserInfo;
import com.wulianwang.manage.utils.base.Message;
import com.wulianwang.manage.utils.global.Global;
import com.wulianwang.manage.utils.util.JsonUtil;
import org.springframework.stereotype.Component;

/**
 * 解决跨域的过滤器
 */
@Component
@WebFilter(urlPatterns = "/*", filterName = "accessFilter")  //这里的“/*” 表示的是需要拦截的请求路径
public class AccessFilter implements Filter{

    @Override
    public void destroy() {

    }

    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain)
            throws IOException, ServletException {

        HttpServletRequest request = (HttpServletRequest) req;
        HttpServletResponse response = (HttpServletResponse) res;
        response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
        response.setHeader("Access-Control-Allow-Methods", "HEAD, POST, GET, OPTIONS, DELETE, PUT");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "x-requested-with");
        response.setHeader("Access-Control-Allow-Credentials","true"); //是否支持cookie跨域

        chain.doFilter(req, res);

    }

    @Override
    public void init(FilterConfig arg0) throws ServletException {

    }

}

告辞