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

前言

最近在跨域、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)
})

总结

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

您可能感兴趣的文章:

  • 详解axios在vue中的简单配置与使用
  • 基于vue配置axios的方法步骤
  • Vue2 配置 Axios api 接口调用文件的方法
  • vue.js简单配置axios的方法详解
  • 动态Axios的配置步骤详解
赞 (0)

相关推荐

  • 动态Axios的配置步骤详解

    前言 以前写Vue项目的时候都是使用vue-resource做为项目ajax库,在11月份的某一天尤大微博的更新表示ajax的库应该是通用的,放弃了对vue-resource的技术支持,推荐使用axios. 推荐使用Vue-cli工具来创建和管理项目,就算刚开始不熟悉,用着用着便可知晓其中的奥妙.前一段时间官方所推荐的数据请求插件还是Vue-resource,但现在已经变了,变成了Axios,不用知道为什么变了,反正这个用起来比那个好一些,用就是了,下面是一些封装axios请求的一些经验,不对之

  • vue.js简单配置axios的方法详解

    前言 官方现在已经不再推荐用resource了,换了个axios,咱也不能落后,至少你得知道咋弄,面试的时候也好给面试官吹吹牛逼,废话不多说. 它本身具有以下特征: 从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求 支持 Promise API 拦截请求和响应 转换请求和响应数据 取消请求 自动转换JSON数据 客户端支持防止 CSRF/XSRF 配置方法 首先用npm安装 npm install --save axios vue-axios 安装完之后,在

  • Vue2 配置 Axios api 接口调用文件的方法

    Vue2 配置 Axios api 接口调用文件的方法

    前情回顾 在上一篇中,我们通过配置基本的信息,已经让我们的项目能够正常的跑起来了.但是,这里还没有涉及到 AJAX 请求接口的内容. vue 本身是不支持 ajax 接口请求的,所以我们需要安装一个接口请求的 npm 包,来使我们的项目拥有这个功能. 这其实是一个重要的 unix 思想,就是一个工具只做好一件事情,你需要额外的功能的时候,则需要安装对应的软件来执行.如果你以前是一个 jquery 重度用户,那么可能理解这个思想一定要深入的理解. 支持 ajax 的工具有很多.一开始,我使用的是

  • 基于vue配置axios的方法步骤

    axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征: 从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求 支持 Promise API 拦截请求和响应 转换请求和响应数据 取消请求 自动转换JSON数据 客户端支持防止 CSRF/XSRF 1.背景 在项目开发中ajax请求是必不可缺少 一部分ajax请求不需要loading或则请求时间少于多少是不显示loading 项目中对请求的同一化

  • 详解axios在vue中的简单配置与使用

    一.axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征: 从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求 支持 Promise API 拦截请求和响应 转换请求和响应数据 取消请求 自动转换JSON数据 客户端支持防止 CSRF/XSRF 二.引入方式: npm: $ npm install axios //淘宝源 $ cnpm install axios bower: $ bowe

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

    前言 最近在跨域.cookie 以及表单上传这几个方面遇到了点小问题,做个简单探究和总结.本文主要介绍了关于axios中cookie跨域及相关配置的相关内容,下面话不多说了,来一起看看详细的介绍吧. 1. 带cookie请求 - 画个重点 axios默认是发送请求的时候不会带上cookie的,需要通过设置withCredentials: true来解决. 这个时候需要注意需要后端配合设置: header信息 Access-Control-Allow-Credentials:true Access

  • jQuery 跨域访问解决原理案例详解

    浏览器端跨域访问一直是个问题,多数研发人员对待js的态度都是好了伤疤忘了疼,所以病发的时候,时不时地都要疼上一疼.记得很久以前使用iframe 加script domain 声明.yahoo js util 的方式解决二级域名跨域访问的问题. 时间过得好快,又被拉回js战场时, 跨域问题这个伤疤又开疼了.好在,有jQuery帮忙,跨域问题似乎没那么难缠了.这次也借此机会对跨域问题来给刨根问底,结合实际的开发项目,查阅了相关资料,算是解决了跨域问题...有必要记下来备忘, 跨域的安全限制都是指浏览

  • python案例中Flask全局配置示例详解

    目录 WEB服务全局配置 Flask全局配置 before_request after_request Flask自定义中间件 WEB服务全局配置 在目前的开发过市场当中,有很多WEB服务框架,Flask只是其中之一,但是总体上来看,所有的WEB框架都是依据HTTP协议的逻辑从请求到响应设计的.固然有很多功能是独立的,但是也有一部分功能需要全局设定,比如安全校验,比如埋点日志,那么这里就用到了全局配置. 所谓的全局配置,就是在框架全局,请求前后,响应前后,设置的全局配置,比如登录校验,这个功能并

  • java中Servlet监听器的工作原理及示例详解

    监听器就是一个实现特定接口的普通java程序,这个程序专门用于监听另一个java对象的方法调用或属性改变,当被监听对象发生上述事件后,监听器某个方法将立即被执行. 监听器原理 监听原理 1.存在事件源 2.提供监听器 3.为事件源注册监听器 4.操作事件源,产生事件对象,将事件对象传递给监听器,并且执行监听器相应监听方法 监听器典型案例:监听window窗口的事件监听器 例如:swing开发首先制造Frame**窗体**,窗体本身也是一个显示空间,对窗体提供监听器,监听窗体方法调用或者属性改变:

  • SSM框架整合JSP中集成easyui前端ui项目开发示例详解

    SSM框架整合JSP中集成easyui前端ui项目开发示例详解

    目录 前言 EasyUI下载与配置 页面美化 运行结果 总结与问题 前言 前端的UI框架很多,如bootsrap.layui.easyui等,这些框架提供了大量控件供开发人员使用,我们无需花费太大的精力,使得我们的页面具有专业标准,使用起来也很简单.所有的前端框架使用方式基本上大同小异,以下使用easyui作为UI框架做一演示,个人认为easyui提供的控件比较好看. EasyUI下载与配置 使用EasyUI,必须下载其js包,下载官网地址:https://www.jeasyui.cn/ 下载j

  • SpringMVC域对象共享数据示例详解

    SpringMVC域对象共享数据示例详解

    目录 SpringMVC域对象共享数据 一.域对象 1. 域对象的作用 2. 域对象生命周期 3. 使用原则 二.向域对象共享数据 1. 向 request 域对象共享数据 2. 向 session 域共享数据 3. 向 application 域共享数据 SpringMVC域对象共享数据 一.域对象 1. 域对象的作用 就是在一定范围内可以共享数据,通常有 3 种: request: 一次请求,多个资源共享数据 session: 默认一次会话,多个请求,多个资源共享数据 servletCont

  • Pandas中八个常用option设置的示例详解

    Pandas中八个常用option设置的示例详解

    目录 前言 1. 显示更多行 2. 显示更多列 3. 改变列宽 4. 设置float列的精度 5. 数字格式化显示 用逗号格式化大值数字 设置数字精度 百分号格式化 6. 更改绘图方法 7. 配置info()的输出 8. 打印出当前设置并重置所有选项 前言 通过pandas的使用,我们经常要交互式地展示表格(dataframe).分析表格.而表格的格式就显得尤为重要了,因为大部分时候如果我们直接展示表格,格式并不是很友好. 其实呢,这些痛点都可以通过pandas的option来解决.短短几行代码

  • flutter中的资源和图片加载示例详解

    目录 封面图 指定相应的资源 资源绑定 Asset bundling 资源变体 加载资源 加载文本资源 加载图片 加载依赖包中的图片 最后 封面图 下个季度的目标是把前端监控相关的内容梳理出来,梳理出来之后可能会在公司内部做个分享- Flutter应用程序既括代码也包括一些其他的资产,我们通常这些资产为资源. 有时候我会思考assets这个单词,在程序中到底应该翻译为资产呢?还是翻译为资源?按照习惯,我们这里还是称为资源好了- 这些资源是一些与应用程序捆绑在一起和并且部署应用时会用到的的文件,在

  • JavaScript中的ajax功能的概念和示例详解

    AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML). 个人理解:ajax就是无刷新提交,然后得到返回内容. 对应的不使用ajax时的传统网页如果需要更新内容(或用php做处理时),必须重载整个网页页面. 示例: html代码如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>

  • Django中的模型类设计及展示示例详解

    django中设计数据模型类是基于ORM的对象关系映射更方便的进行数据库中的数据操作. 对象关系映射 把面向对象中的类和数据库表--对应,通过操作类和对象,对数表实现数据操作,不需要写sql,由ORM框架生成 django实现了ORM框架,在项目中与数据库之间产生桥梁作用 django数据库定义模型的步骤如下: python manage.py makemigrations python mange.py migrate 在应用models.py中编写模型类,继承models.Model类 在模

随机推荐