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 相关文章推荐
解决 FireFox 下[使用event很麻烦] 的问题.
Aug 22 Javascript
jquery ajax 登录验证实现代码
Sep 23 Javascript
JQuery live函数
Dec 24 Javascript
jQuery根据元素值删除数组元素的方法
Jun 24 Javascript
Bootstrap模块dropdown实现下拉框响应
May 22 Javascript
jquery radio的取值_radio的选中_radio的重置方法
Sep 20 Javascript
深入理解Javascript中的valueOf与toString
Jan 04 Javascript
JavaScrpt判断一个数是否是质数的实例代码
Jun 11 Javascript
layui前端框架之table表数据的刷新方法
Aug 17 Javascript
TypeScript 引用资源文件后提示找不到的异常处理技巧
Jul 15 Javascript
echarts实现获取datazoom的起始值(包括x轴和y轴)
Jul 20 Javascript
JS访问对象两种方式区别解析
Aug 29 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
第一节--面向对象编程
2006/11/16 PHP
PHP.vs.JAVA
2016/04/29 PHP
php判断用户是否关注微信公众号
2016/07/22 PHP
ThinkPHP5.0框架实现切换数据库的方法分析
2019/10/30 PHP
QQ登录简单实现代码
2021/03/09 Javascript
基于jquery的textarea发布框限制文字字数输入(添加中文识别)
2012/02/16 Javascript
使用script的src实现跨域和类似ajax效果
2014/11/10 Javascript
JavaScript更改字符串的大小写
2015/05/07 Javascript
jQuery鼠标事件汇总
2015/08/30 Javascript
解决jQuery使用JSONP时产生的错误
2015/12/02 Javascript
利用AngularJs实现京东首页轮播图效果
2016/09/08 Javascript
AngularJS Select(选择框)使用详解
2017/01/18 Javascript
Javascript实现登录记住用户名和密码功能
2017/03/22 Javascript
js实现扫雷小程序的示例代码
2017/09/27 Javascript
Vue组件之全局组件与局部组件的使用详解
2017/10/09 Javascript
node文件批量重命名的方法示例
2017/10/23 Javascript
微信小程序wx.getImageInfo()如何获取图片信息
2018/01/26 Javascript
微信小程序上传图片功能(附后端代码)
2020/06/19 Javascript
vue组件横向树实现代码
2018/08/02 Javascript
Vue实现类似Spring官网图片滑动效果方法
2019/03/01 Javascript
小程序的上传文件接口的注意要点解析
2019/09/17 Javascript
Vue仿Bibibili首页的问题
2021/01/21 Vue.js
[08:38]DOTA2-DPC中国联赛 正赛 VG vs Elephant 选手采访
2021/03/11 DOTA
python实现基于两张图片生成圆角图标效果的方法
2015/03/26 Python
Python 正则表达式的高级用法
2016/12/04 Python
Android 兼容性问题:java.lang.UnsupportedOperationException解决办法
2017/03/19 Python
使用Python控制摄像头拍照并发邮件
2019/04/23 Python
Python学习笔记之字符串和字符串方法实例详解
2019/08/22 Python
Python&&GDAL实现NDVI的计算方式
2020/01/09 Python
Jupyter Notebook 文件默认目录的查看以及更改步骤
2020/04/14 Python
pytorch快速搭建神经网络_Sequential操作
2020/06/17 Python
新员工试用期自我评价
2015/03/10 职场文书
2015年高三教学工作总结
2015/07/21 职场文书
自定义函数实现单词排序并运用于PostgreSQL(实现代码)
2021/04/22 PostgreSQL
vue3使用vue-router的完整步骤记录
2021/06/20 Vue.js
golang实现一个简单的websocket聊天室功能
2021/10/05 Golang