axios请求使用方法 并解决跨域问题 |
您所在的位置：网站首页 › axios实现跨域三种方法 › axios请求使用方法 并解决跨域问题 |
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.springframework.context.ApplicationContext; import org.springframework.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 发个异步请求过去,看下图，后台已经接受到参数了
总结： 网上跨域请求的解决方案都很乱，而且大部分的解决方案都是没有用的， 且有些方案讲的很抽象，让新手不容易理解，这篇文章，没有废话，直接告诉你解决方案，简单粗暴 |
【本文地址】
今日新闻 |
推荐新闻 |