axios如何跨域请求_前端跨域请求

axios如何跨域请求_前端跨域请求axios跨域请求详情写这篇文章的背景是因为之前遇到的,在跨域的情况下通过axios发起的get请求正常,post请求会在正式请求发送之前先发送一个opstions请求,而后端接口没有兼容options,导致404的情况。而在解决这个问题时带着好奇心顺带查了一下,给自己补充了些知识点跨域请求分两种简单讲,从JavaScript代码发起的XMLHttpRequest请求可以分为两种:不会触发CORS预检的请求,而是直接向服务端发送请求,什么是CORS预检咱们后面

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

axios 跨域请求详情

写这篇文章的背景是因为之前遇到的,在跨域的情况下通过 axios 发起的 get 请求正常,post 请求会在正式请求发送之前先发送一个 opstions 请求,而后端接口没有兼容 options,导致 404 的情况。
而在解决这个问题时带着好奇心顺带查了一下,给自己补充了些知识点

跨域请求分两种

简单讲,

JavaScript 代码发起的 XMLHttpRequest 请求可以分为两种:
不会触发CORS预检的请求,而是直接向服务端发送请求,什么是 CORS预检 咱们后面说,其匹配的规则大致如下:
1. 请求方法为 GET、 HEAD、 POST 中的一种
2. CORS安全部首字段在以下集合中:
ACCEPT
Accept-Language
Content-Language
DPR
Downlink
Save-Data
Viewport-Width
Width
Content-Type (值仅限text/plain,multipart/form-data,application/x-www-form-urlencoded)

3. 请求中的XMLHttpRequestUpload 对象没有注册任何事件监听
4. 请求中没有ReadableStream对象

预检请求:

在发送正式请求之前,会先发起一个 OPTIONS 预检请求到服务器,以获知服务器是否允许该实际请求,若不允许,则不再发送请求,其匹配规则如下:

1 请求方法为:PUT、 DELETE、 CONNECT、 OPTIONS、 TRACE、 PATCH 之一
2 人为设置了 CORS安全部首字段集合 之外的字段
3 请求中的 XMLHttpRequestUpload 对象注册了任意事件监听器
4 请求中使用了 ReadableStream 对象

在跨域请求中,若服务端返回了正确的跨域响应部首:Access-Control-Allow-Origin、Access-Control-Allow-Method、Access-Control-Allow-Headers, 则跨域请求能正常获取数据。

问题解决:

根据以上了解的知识点,跟进遇到的问题,发现 axios 的请求部首 Content-Type 的值默认为 application/json;charset=utf-8,且 POST 请求数据为 json 格式,故进行 POST 请求会先发出预检请求,若服务端对预检请求的响应为不支持,则请求终止。
根据上面分析出的原因,以下列举两种解决方案:

完善服务端接口及跨域响应部首

跨域时将请求转换为简单请求:

请求部首的 Content-Type 设为 application/x-www-form-urlencoded
处理 POST 请求数据,方式有以下两种:
1 通过 URLSearchParams 生成POST 请求的数据
2 使用 qs 库的 stringify api 对请求数据进行转换(若请求数据中某个字段的值为引用类型,需要先通过 3 JSON.stringify 处理,以防止服务端无法识别)

例子
/* 通过 qs 模块处理请求数据*/
import axios from 'axios'
import qs from 'qs'

axios.defaults.withCredentials = true // 若跨域请求需要带 cookie 身份识别
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'

// 请求拦截器
axios.interceptors.request.use(req => { 
   
    // 对 post 请求数据进行处理
    if (req.method === 'post') { 
   
        Object.keys(req.data).forEach(item => { 
   
            !isPrimeval(req.data[item]) && (req.data[item] = JSON.stringify(req.data[item]))
        })
        req.data = qs.stringify(req.data)
    }
    return req
}, error => { 
   
    // 请求出错时处理
    return Promise.reject(error)
})

or

/* 通过 URLSearchParams 生成 POST 请求数据 */
import axios from 'axios'

async function anInterface (url, params = { 
   }) { 
   
    let data = new URLSearchParams()
    for(let key in params) { 
   
        data.append(params[key])
    }
    const res = await axios.post(url, data)

    // 处理数据
    
    return res.data
}

通过以上方式即可将 POST 预检请求转换为简单请求,其好处不言而喻,对于多个 POST 请求而言,可以减少一半的请求数量,且在一些服务端比较不能改动的场景更为适用

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/194926.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • mysql的乐观锁使用_java悲观锁乐观锁定义

    mysql的乐观锁使用_java悲观锁乐观锁定义正确的理解MySQL的乐观锁,悲观锁与MVCC!首先声明,MySQL的测试环境是5.7前提概念数据库并发的三种场景乐观锁和悲观锁的澄清悲观锁乐观锁MVCC多版本并发控制总结乐观锁和悲观锁的抉择OCC,PCC,MVCC参考资料前提概念数据库并发的三种场景数据库并发场景有三种,分别为:读-读:不存在任何问题,也不需要并发控制读-写:有隔离性问题,…

  • customerrors 配置节的使用

    customerrors 配置节的使用Web.config文件中的<customErrors>元素用于提供有关ASP.NET应用程序自定义错误消息的信息,结构说明如下:<configuration>  ……  <system.web>     ……     <customErrorsdefaultRedirect="url"mode="…

  • 二叉树abcdefghij先序遍历_二叉搜索树的查找递归算法

    二叉树abcdefghij先序遍历_二叉搜索树的查找递归算法给定一个二叉树,判断其是否是一个有效的二叉搜索树。假设一个二叉搜索树具有如下特征:节点的左子树只包含小于当前节点的数。节点的右子树只包含大于当前节点的数。所有左子树和右子树自身必须也是二叉搜索树。题解深搜/** * Definition for a binary tree node. * struct TreeNode { * int val; * TreeNode *left; * TreeNode *right; * TreeNode() :

  • C语言图书管理系统设计报告「建议收藏」

    C语言图书管理系统设计报告「建议收藏」源代码:https://blog.csdn.net/k_young1997/article/details/73480766XXXX大学C语言课程设计报告题目图书管理系统设计专业班级XXXX级计算机科学与技术本科X班组别计科第…

    2022年10月16日
  • 购物程序「建议收藏」

    购物程序「建议收藏」#-*-coding:utf-8-*-"""CreatedonTueSep1116:35:292018@author:车路历程"&

  • ALLuxio_Alluxio公司怎么样

    ALLuxio_Alluxio公司怎么样一、什么是AlluxioAlluxio(之前名为Tachyon)是世界上第一个以内存为中心的虚拟的分布式存储系统。它统一了数据访问的方式,为上层计算框架和底层存储系统构建了桥梁。应用只需要连接Alluxio即可访问存储在底层任意存储系统中的数据。此外,Alluxio的以内存为中心的架构使得数据的访问速度能比现有常规方案快几个数量级。在大数据生态系统中,Alluxio介于计算框架(如Apache…

    2022年10月22日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号