axios中cookie跨域及相关配置示例详解


Posted in Javascript onDecember 20, 2017

前言

最近在跨域、cookie 以及表单上传这几个方面遇到了点小问题,做个简单探究和总结。本文主要介绍了关于axios中cookie跨域及相关配置的相关内容,下面话不多说了,来一起看看详细的介绍吧。

1、 带cookie请求 - 画个重点

axios默认是发送请求的时候不会带上cookie的,需要通过设置withCredentials: true来解决。 这个时候需要注意需要后端配合设置:

  • header信息 Access-Control-Allow-Credentials:true
  • Access-Control-Allow-Origin不可以为 '*',因为 '*' 会和 Access-Control-Allow-Credentials:true 冲突,需配置指定的地址

如果后端设置 Access-Control-Allow-Origin: '*' , 会有如下报错信息

Failed to load http://localhost:8090/category/lists: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. Origin 'http://localhost:8081' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

后端配置缺一不可,否则会出错,贴上我的后端示例:

const express = require('express')
const app = express()
const cors = require('cors') // 此处我的项目中使用express框架,跨域使用了cors npm插件
app.use(cors{
   credentials: true, 
   origin: 'http://localhost:8081', // web前端服务器地址
   // origin: '*' // 这样会出错
  })

成功之后,可在请求中看到

2、我的前端项目代码的axios配置

axios统一配置,会很好的提升效率,避免bug,以及定位出bug所在(方便捕获到error信息)

建立一个单独的fetch.js封装axios请求并作为方法暴露出来

import axios from 'axios'
// 创建axios实例
const service = axios.create({
 baseURL: process.env.BASE_API, // node环境的不同,对应不同的baseURL
 timeout: 5000, // 请求的超时时间
 //设置默认请求头,使post请求发送的是formdata格式数据// axios的header默认的Content-Type好像是'application/json;charset=UTF-8',我的项目都是用json格式传输,如果需要更改的话,可以用这种方式修改
 // headers: { 
 // "Content-Type": "application/x-www-form-urlencoded"
 // },
 withCredentials: true // 允许携带cookie
})
// 发送请求前处理request的数据
axios.defaults.transformRequest = [function (data) {
 let newData = ''
 for (let k in data) {
 newData += encodeURIComponent(k) + '=' + encodeURIComponent(data[k]) + '&'
 }
 return newData
}]
// request拦截器
service.interceptors.request.use(
 config => {
 // 发送请求之前,要做的业务
 return config
 },
 error => {
 // 错误处理代码
 
 return Promise.reject(error)
 }
)
// response拦截器
service.interceptors.response.use(
 response => {
 // 数据响应之后,要做的业务
 return response
 },
 error => {
 return Promise.reject(error)
 }
)
export default service

如下所示,如果需要调用ajax请求

import fetch from '@/utils/fetch'
fetch({
 method: 'get',
 url: '/users/list'
})
 .then(res => {
 cosole.log(res)
})

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
可以支持多中格式的JS键盘
May 02 Javascript
JavaScript开发时的五个注意事项
Dec 08 Javascript
js中各浏览器中鼠标按键值的差异
Apr 07 Javascript
利用json获取字符出现次数的代码
Mar 22 Javascript
利用百度地图JSAPI生成h7n9禽流感分布图实现代码
Apr 15 Javascript
AngularJS在IE8的不支持的解决方法
May 13 Javascript
JS检测页面中哪个HTML标签触发点击事件的方法
Jun 17 Javascript
微信公众号 客服接口的开发实例详解
Sep 28 Javascript
微信小程序 缓存(本地缓存、异步缓存、同步缓存)详解
Jan 17 Javascript
浅谈Vuex@2.3.0 中的 state 支持函数申明
Nov 22 Javascript
微信小程序实现红包雨功能
Jul 11 Javascript
微信小游戏中three.js离屏画布的示例代码
Oct 12 Javascript
JavaScript实现重力下落与弹性效果的方法分析
Dec 20 #Javascript
axios进阶实践之利用最优雅的方式写ajax请求
Dec 20 #Javascript
vue.js $refs和$emit 父子组件交互的方法
Dec 20 #Javascript
jQuery进阶实践之利用最优雅的方式如何写ajax请求
Dec 20 #jQuery
详解Vue 中 extend 、component 、mixins 、extends 的区别
Dec 20 #Javascript
vue.js vue-router如何实现无效路由(404)的友好提示
Dec 20 #Javascript
详解vue mixins和extends的巧妙用法
Dec 20 #Javascript
You might like
基于laravel belongsTo使用详解
2019/10/18 PHP
js给onclick赋值传参数的两种方法
2013/11/25 Javascript
window.location.href IE下跳转失效的解决方法
2014/03/27 Javascript
浅析node.js中close事件
2014/11/26 Javascript
javascript+canvas实现刮刮卡抽奖效果
2015/07/29 Javascript
易操作的jQuery表单提示插件
2015/12/01 Javascript
Nodejs Stream 数据流使用手册
2016/04/17 NodeJs
vue v-on监听事件详解
2017/05/17 Javascript
详解在Vue中如何使用axios跨域访问数据
2017/07/07 Javascript
Angular浏览器插件Batarang介绍及使用
2018/02/07 Javascript
jQuery实现为动态添加的元素绑定事件实例分析
2018/09/07 jQuery
关于自定义Egg.js的请求级别日志详解
2018/12/12 Javascript
JS尾递归的实现方法及代码优化技巧
2019/01/19 Javascript
turn.js异步加载实现翻书效果
2019/07/25 Javascript
详解Vue 的异常处理机制
2020/11/30 Vue.js
[01:34]完美“圣”典宣传片震撼发布,12.17与你不见不散
2016/12/16 DOTA
用Python脚本生成Android SALT扰码的方法
2013/09/18 Python
Python爬取京东的商品分类与链接
2016/08/26 Python
python八皇后问题的解决方法
2018/09/27 Python
python使用selenium登录QQ邮箱(附带滑动解锁)
2019/01/23 Python
django fernet fields字段加密实践详解
2019/08/12 Python
python实现tail -f 功能
2020/01/17 Python
IntelliJ 中配置 Anaconda的过程图解
2020/06/01 Python
基于python和flask实现http接口过程解析
2020/06/15 Python
实例教程 HTML5 Canvas 超炫酷烟花绽放动画实现代码
2014/11/05 HTML / CSS
h5调用摄像头的实现方法
2016/06/01 HTML / CSS
广告学专业应届生求职信
2013/10/01 职场文书
工业设计专业个人求职信范文
2013/12/28 职场文书
先进德育工作者事迹材料
2014/01/24 职场文书
信用社主任竞聘演讲稿
2014/05/23 职场文书
迟到检讨书范文
2015/01/27 职场文书
小学英语教学随笔
2015/08/14 职场文书
python四个坐标点对图片区域最小外接矩形进行裁剪
2021/06/04 Python
Java 常见的限流算法详细分析并实现
2022/04/07 Java/Android
python神经网络 tf.name_scope 和 tf.variable_scope 的区别
2022/05/04 Python
css之clearfix的用法深入理解(必看篇)
2023/05/21 HTML / CSS