axios请求使用方法 并解决跨域问题

最近在研究axios 的异步请求，用法和ajax差不多，但是官方说明比ajsx要好

  get 请求使用方法

var url = \"请求链接\";
var param= {\"参数\":\"参数的值\"};
// axios 参数必须用params包裹，例如:  var  param = {params:{pageNo:1,pageSize:20}}
    
    param  = {params:param};
    axios.get(
        url,
        param
    ).then(function (data) {
        callBackFunc(data.data);
    }).catch(function (e) {
        console.log(\"url:\"+url +\",请求失败，网络错误\");
    });

post请求使用方法

var url = \"请求链接\";
var formDate = {\"参数\":\"参数的值\"};

axios.post(
       url,
       formDate
).then(function (data) {
    alert(\"请求成功\");
}).catch(function (e) {
    console.log(\"url:\"+url +\",请求失败，网络错误\");
});

使用方法就这么简单，

################## 解决跨域问题 ##############################################

先看看报错信息，跨域问题一直让人很头疼

解决方案是在后端服务器响应时添加响应头（这里用 java 示例）在过滤器中为每个请求添加响应头 Access-Control-Allow-Origin 以解决跨域问题

package com.icode.common.web.config.filter;

import com.icode.common.command.UserSessionCommand;
import com.icode.common.constant.CommonContant;
import com.icode.common.web.service.WebCacheService;
import com.xd.core.common.error.ErrorMsg;
import com.xd.core.common.utils.JsonParser;
import com.xd.core.common.utils.StringUtils;
import com.xd.core.common.utils.WebUtils;
import org.spring work.context.ApplicationContext;
import org.spring work.web.context.support.WebApplicationContextUtils;

import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

/**
 * <过滤器>
 **/
@javax.servlet.annotation.WebFilter(urlPatterns = \"/*\", filterName = \"myfilter\")
public class WebFilter implements Filter {
	
	
	@Override
	public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
		HttpServletRequest request = (HttpServletRequest) servletRequest;
		HttpServletResponse response = (HttpServletResponse) servletResponse;
		//为所有请求添加响应头，以解决ajax跨域问题
		response.setHeader(\"Access-Control-Allow-Origin\", \"*\");
		//设置编码
		response.setCharacterEncoding(\"UTF-8\");
		request.setCharacterEncoding(\"UTF-8\");
		filterChain.doFilter(request, response);
	}

}

关键代码

//为所有请求添加响应头，以解决ajax跨域问题
response.setHeader(\"Access-Control-Allow-Origin\", \"*\");

然后前端 axios 的 post 请求封装成 FormData 对象 即可解决跨域问题

  //使用formdata方式传参
    var formDate = new FormData();
    formDate.append(\"loginName\",\"123\");
    formDate.append(\"password\",\"123\");
    axios.post(
        url,
        formDate,
        config
    ).then(function (data) {
        callBackFunc(data.data);
    }).catch(function (e) {
        console.log(\"url:\"+url +\",请求失败，网络错误\");
    });

在瞄一眼controller的代码

	/**
	 *
	 * <注册>
	 *
	 */
	@PostMapping(\"user/register\")
	public ResponseCommand register( UserRequestCommand command){
		
		System.out.println(command.getLoginName());
		System.out.println(command.getPassword());
	}
	

测试一下，写个html 使用axios 发个异步请求过去,看下图，后台已经接受到参数了

总结：

    网上跨域请求的解决方案都很乱，而且大部分的解决方案都是没有用的，

    且有些方案讲的很抽象，让新手不容易理解，这篇文章，没有废话，直接告诉你解决方案，简单粗暴