处理axios跨域_【经验与坑】Vue.js前后端交互的跨域问题传输data格式问题

一.解决跨域问题

后端：javaweb-servlet

前端：vue-cli axios post请求失败

为什么会出现跨域问题？

跨域问题是浏览器同源策略限制，当前域名的js只能读取同域下的窗口属性

而我们常见的网址一般包括协议, 域名, 端口几个部分, 在浏览器的同源策略下,协议不同 域名不同 端口不同都会出现跨域

浏览器的同源策略是确保浏览器安全的特别重要的一个安全策略

如果没有同源策略：在一个域上加载的脚本不允许访问另一个域上文本属性 不然通过内嵌 iframe 恶意添加 javaScript 脚本就可以轻松获取到用户信息

何为同源：url 是由协议、域名、端口和路径组成 如果两个路径的协议、域名、端口都相同则表示在同一个域上

比如, 从A页面请求B页面的一些数据, 如果没有同源策略, 就不会出现跨域问题, 就可以轻松的拿到B页面的数据, 但是因为有浏览器的同源策略,在进行这样的操作时, 浏览器的是会报跨域的错误的

就像现在这个问题，前端页面的地址是http://localhost:8080/....

后端的请求url是 http://localhost:8888/....这样显然出现了跨域问题，解决方法如下。

javaweb-servlet：

这个问题要从服务端进行更改

配置一个filter过滤器，过滤所有的请求，并且设置响应头

package Filter;import java.io.IOException;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.http.HttpServletResponse;public class CORSFilter implements Filter{  @Override  public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)      throws IOException, ServletException {    // TODO Auto-generated method stub    //变成http的        HttpServletResponse resp = (HttpServletResponse) response;        // 添加参数，允许任意domain访问        resp.setContentType("text/html;charset=UTF-8");        //禁用缓存，确保网页信息是最新数据        resp.setHeader("Pragma","No-cache");        resp.setHeader("Cache-Control","no-cache");        resp.setHeader("Access-Control-Allow-Origin", "*");        resp.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, HEAD, DELETE, PUT");        resp.setHeader("Access-Control-Max-Age", "3600");        resp.setHeader("Access-Control-Allow-Headers",                "X-Requested-With, Content-Type, Authorization, Accept, Origin, User-Agent, Content-Range, Content-Disposition, Content-Description");        resp.setDateHeader("Expires", -10);        chain.doFilter(request, resp);  }    public void init(FilterConfig filterConfig) {}    public void destroy() {}}

在web.xml中声明该过滤器(注意：最好放在最前面)

此时，跨域问题就解决了。

紧接着出现了另一个问题:

axios发出post请求时servlet那端的request.getParameter("atrri") 接受到了一堆空值！

但是在postman和前端单独测试时都没有问题。

那么我认为这应该是前端传值的格式的问题，这次从前端入手，axios-post请求数据时候没有表明config的时候默认为

application/json;charset=utf-8

说明在给url后方添加了一段{CNO:6666,PNO:80004}

http://localhost:8888/.../login.do?{CNO:6666,PNO:80004}

这样肯定接收不到，除非后端进行IO的处理，这种办法太麻烦了。

而我们所需要的是这样的形式：

http://localhost:8888/.../login.do?CNO=6666&PNO=80004&Passwd=123123

这样后端才能顺利接收到，所以问题就是如何转换一下！

借助axios qs工具完成这一需求

首先：安装qs，在实战中，我第一次安装后，重启vue服务，然后莫名报错。在项目中卸载了qs后再次安装qs问题就解决了。

安装完成后，可以重启一下vue。

其次：使用

axios.post('http://localhost:8888/vue_sf_two_server/login.do',          qs.stringify({            CNO:this.cm_code,            PNO:this.PNO,            Passwd:this.passwd          }),{headers: {          'Content-Type': 'application/x-www-form-urlencoded'}})

问题解决。