背景
在开发 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 的设置即可
网友评论