vue axios 跨域的坑

描述

• 1.最近在做一个前后端分离的项目，用的是vue-cli搭的环境，然后发请求用的是 axios，但就是在和后端做联调的时候，坑呀。半天一直请求不通，后来发现是因为不在一个局域网。

• 2.改在一个局域网之后，对于跨域，前端发post请求之前都会发送一个 options 请求（不懂options请求的请自行百度），去验证服务端是否支持当前的 domain 和 methods。但是后端的java暂时不支持 options 请求。所以在 axios 请的配置中加以下的 headers ( headers: {'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'})，就不会发送options请求了，直接发 post 请求。以下是我完整的代码：

   ```js
   function axiosApi(method, url, params) {
      return axios({
          method: method,
          // 就是这句
          headers: {'Content-Type':'application/x-www-form-urlencoded;                  charset=UTF-8'},
          url: url,
          data: (method == 'POST' || method == 'PUT') && params ? qs.stringify(params) : null,
         params: method == 'GET' || method == 'DELETE' ? params : null,
         withCredentials: false
      })
    }
  

  “`

• 3.options请求是不发了，但是post请求传过去的数据不见了，后台说是没有数据，都是空的。打开 F12。看到数据都是以 json字符串的格式发送过去（axios默认以 application/json 格式提交数据）。如果使用这种编码方式，那么传递到后台的将是序列化后的json字符串。后台仍旧是使用 处理 application/x-www-form-urlencoded 编码方式 的方法在处理数据，当然拿不到数据（如果要问我说 2 中设置了headers 中的提交数据格式，为什么这里还是以 json 字符串的格式提交，我也不知道。如果知道请直接留言）。

  • 这里的解决方法就是用 qs 。
  • npm install –save qs （有人说axios里面有 qs ，但是我不install，run dev 的时候报错）
  • 在需要的地方 import qs from ‘qs’
  • 然后在发送请求的地方用 qs.stringify(params) 将参数处理一下
• 如果到这里你觉得结束了，那就是错了。分明请求发送成功了，而且看到后台返回正确的数据了，但是控制台还一直显示跨域，造成数据解析不了。后台没有设置允许跨域的header，需要以下设置

          response.setHeader("Access-Control-Allow-Origin","*");
          response.setHeader("Access-Control-Allow-Methods","POST");