axios 跨域处理以及带 cookies 的请求

背景

在开发 vue 的项目时，使用 axios 来与后端交互，经常会遇到几个问题

• 请求跨域
• 请求中带 cookies

请求跨域解决方案

解决请求跨域有以下两种方案

• 同源访问
• 后端允许跨域请求

这里主要针对非同源情况做介绍，解决请求跨域需要后端配合处理，下面直接看代码，这里的 demo 中，前端运行在 localhost:1234，后端运行在 localhost:3000，不满足同源协议

axios发起请求

import axios from 'axios'

(async function () {
  try {
    let {data} = await axios.get('//localhost:3000')
    console.log(data)
  } catch (e) {
    console.warn(e)
  }
})()

在后端不做处理时，页面会报错

QQ20180530-233625@2x.png

后端只需要按照提示设置响应头就可以了

res.header("Access-Control-Allow-Origin", "*")

这时候前端已经可以做跨域请求了，不过一般这种情况尽量仅在测试环境使用，项目上线后通常就会同源访问了，如果仍为非同源，只需将 * 号修改为对应域名即可

请求中带 cookies

日常开发中，有些接口可能需要前端请求的时候携带 cookies 来做身份判断等操作，而 axios 请求默认是不带 cookies 的，这时需要前端与后端同时做一些调整

前端调整

// 对所有 axios 请求做处理
axios.defaults.withCredentials = true;

// 对单独的 axios 请求做处理
let {data} = await axios.get('//localhost:3000', {
  withCredentials: true
})

此时前端请求已经可以正常携带 cookies 了，而且可以正常发出请求甚至得到数据，而请求仍然抛出了一个 error，导致即使可以从 network 中看到数据，仍然没法进行进一步的使用

QQ20180530-234749@2x.png

此时需要后端做一些调整，具体操作参照报错信息即可，根据当前 demo 的情况，后端可对响应头做如下调整

// res.header("Access-Control-Allow-Origin", "*")
  
res.header("Access-Control-Allow-Origin", "http://localhost:1234")
res.header("Access-Control-Allow-Credentials", true)

此时前端即可做跨域访问的同时，携带 cookies 了，如不涉及跨域情况，则去掉对于 origin 的设置即可