axios03-解决请求头兼容导致跨域报错问题

2024-09-02 15:48
文章标签 问题 请求 解决 报错 导致 兼容 跨域 axios03

本文主要是介绍axios03-解决请求头兼容导致跨域报错问题，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

不同版本接口区别老版本接口(form形式)新版本接口(json形式)
请求头application/x-www-form-urlencodedapplication/json;charset=UTF-8
参数格式序列化字符串: key1=value1&key2=value2json格式字符串 :{key1:value1}
接口请求头和参数错误提示(1)服务器返回：参数错误
(2)状态码400
(1)服务器返回：参数错误
(2)状态码400
(3)跨域报错

  • 1.老版本的后台接口post请求头是：application/x-www-form-urlencoded

    • axios不支持

    • 解决方案

      • 1.设置axios请求头为application/x-www-form-urlencoded

        • headers: {'Content-type': 'application/x-www-form-urlencoded'}

      • 2.将参数拼接为：key1=value1&key2=value2

        • 使用qs第三方包来拼接：Qs.stringify({username: 'zxk'})
          • qs网站：https://www.npmjs.com/package/qs

  • 2.新版本的后台接口post请求头是：application/json;charset=UTF-8

    • axios默认支持，不需要任何处理
/*1.学习目标介绍 ： axios解决post请求兼容性问题2.学习路线 ：(1)post请求头类型a.在很久很久以前，ajax技术没有发明以前，浏览器发送请求使用的是form表单来发送，form表单默认的请求头是：application/x-www-form-urlencodedb.后来ajax技术发明之后，由于之前的服务器处理post请求都是按照表单的默认请求头方式来处理所以，ajax发送post请求，一般也设置请求头为：application/x-www-form-urlencodedc. axios技术发明之后，此时json数据格式传输已经越来越流行，所以在axios中post请求默认的请求头是：'Content-Type: application/json;charset=UTF-8'd. 不同的请求头，服务器在处理的时候方式不一样。所以前后端必须要统一总结：a. 老接口的post请求头是：application/x-www-form-urlencoded这种方式参数会以：  'key1=value1&key2=value2'形式传输后台处理方式：字符串切割获取参数b. 新接口的post请求头是: application/json;charset=UTF-8这种方式参数会以json格式传输： '{"key":"value"}'这种方式处理：JSON.parse()解析(2)axios解决post请求兼容性a. 如果你的后台是新接口，则不需要任何处理。（axios默认json格式）b. 如果你的后台是老接口(1)需要设置axios的请求头为：application/x-www-form-urlencoded(2)需要将参数转为拼接方式：key1=value1&key2=value2(3)使用axios后如何判断后台是老接口还是新接口？a. 有的服务器会返回一段文本提示你：参数格式错误b. 有的服务器直接返回400错误码，也是提示你参数格式错误  c. 有的服务器会直接报错跨域   */

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><button id="btn1">点我发送post请求(老接口)</button><button id="btn2">点我发送post请求(新接口)</button><!-- 导入axios --><script src="./axios.js"></script><script src="./qs.js"></script><form action="" enctype="application/x-www-form-urlencoded"></form><script>/*1.学习目标介绍 ： axios解决post请求兼容性问题2.学习路线 ：(1)post请求头类型a.在很久很久以前，ajax技术没有发明以前，浏览器发送请求使用的是form表单来发送，form表单默认的请求头是：application/x-www-form-urlencodedb.后来ajax技术发明之后，由于之前的服务器处理post请求都是按照表单的默认请求头方式来处理所以，ajax发送post请求，一般也设置请求头为：application/x-www-form-urlencodedc. axios技术发明之后，此时json数据格式传输已经越来越流行，所以在axios中post请求默认的请求头是：'Content-Type: application/json;charset=UTF-8'd. 不同的请求头，服务器在处理的时候方式不一样。所以前后端必须要统一总结：a. 老接口的post请求头是：application/x-www-form-urlencoded这种方式参数会以：  'key1=value1&key2=value2'形式传输后台处理方式：字符串切割获取参数b. 新接口的post请求头是: application/json;charset=UTF-8这种方式参数会以json格式传输： '{"key":"value"}'这种方式处理：JSON.parse()解析(2)axios解决post请求兼容性a. 如果你的后台是新接口，则不需要任何处理。（axios默认json格式）b. 如果你的后台是老接口(1)需要设置axios的请求头为：application/x-www-form-urlencoded(2)需要将参数转为拼接方式：key1=value1&key2=value2(3)使用axios后如何判断后台是老接口还是新接口？a. 有的服务器会返回一段文本提示你：参数格式错误b. 有的服务器直接返回400错误码，也是提示你参数格式错误  c. 有的服务器会直接报错跨域   *///post请求：老接口/* 1.设置请求头：headers: {'Content-type': 'application/x-www-form-urlencoded'}2.将参数转为字符串拼接方式一般使用第三库qs来转换*/btn1.onclick = function () {//(1)使用第三方库  qs来转换参数格式(推荐)let str1 = Qs.stringify({username: 'zxk'});console.log(str1);//(2)使用js原生对象URLSearchParams来处理 （好处：不需要导入Qs库）// var param = new URLSearchParams();// param.append('username','zxk');axios({url: 'https://autumnfish.cn/api/user/check',method: 'post',data: str1,headers: {'Content-type': 'application/x-www-form-urlencoded'}}).then(res => {console.log(res);})};//post请求：新接口//不需要任何处理btn2.onclick = function () {axios({url: 'http://ttapi.research.itcast.cn/mp/v1_0/authorizations',method: 'post',data: {mobile: '18801185985',code: '246810'},}).then(res => {console.log(res);})};</script>
</body></html>

这篇关于axios03-解决请求头兼容导致跨域报错问题的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1130388。

相关文章

好题——hdu2522（小数问题：求1/n的第一个循环节）

好题——hdu2522（小数问题：求1/n的第一个循环节）

好喜欢这题，第一次做小数问题，一开始真心没思路，然后参考了网上的一些资料。 知识点***********************************无限不循环小数即无理数，不能写作两整数之比*****************************（一开始没想到，小学没学好） 此题1/n肯定是一个有限循环小数，了解这些后就能做此题了。 按照除法的机制，用一个函数表示出来就可以了，代码如下
阅读更多...
hdu1043（八数码问题，广搜 + hash（实现状态压缩） ）

hdu1043（八数码问题，广搜 + hash（实现状态压缩） ）

利用康拓展开将一个排列映射成一个自然数，然后就变成了普通的广搜题。 #include<iostream>#include<algorithm>#include<string>#include<stack>#include<queue>#include<map>#include<stdio.h>#include<stdlib.h>#include<ctype.h>#inclu
阅读更多...
安卓链接正常显示，ios#符被转义%23导致链接访问404

安卓链接正常显示，ios#符被转义%23导致链接访问404

原因分析： url中含有特殊字符 中文未编码 都有可能导致URL转换失败，所以需要对url编码处理  如下： guard let allowUrl = webUrl.addingPercentEncoding(withAllowedCharacters: .urlQueryAllowed) else {return} 后面发现当url中有#号时，会被误伤转义为%23，导致链接无法访问
阅读更多...
如何解决线上平台抽佣高 线下门店客流少的痛点！

如何解决线上平台抽佣高 线下门店客流少的痛点！

目前，许多传统零售店铺正遭遇客源下降的难题。尽管广告推广能带来一定的客流，但其费用昂贵。鉴于此，众多零售商纷纷选择加入像美团、饿了么和抖音这样的大型在线平台，但这些平台的高佣金率导致了利润的大幅缩水。在这样的市场环境下，商家之间的合作网络逐渐成为一种有效的解决方案，通过资源和客户基础的共享，实现共同的利益增长。 以最近在上海兴起的一个跨行业合作平台为例，该平台融合了环保消费积分系统，在短
阅读更多...
购买磨轮平衡机时应该注意什么问题和技巧

购买磨轮平衡机时应该注意什么问题和技巧

在购买磨轮平衡机时，您应该注意以下几个关键点： 平衡精度 平衡精度是衡量平衡机性能的核心指标，直接影响到不平衡量的检测与校准的准确性，从而决定磨轮的振动和噪声水平。高精度的平衡机能显著减少振动和噪声，提高磨削加工的精度。 转速范围 宽广的转速范围意味着平衡机能够处理更多种类的磨轮，适应不同的工作条件和规格要求。 振动监测能力 振动监测能力是评估平衡机性能的重要因素。通过传感器实时监
阅读更多...
缓存雪崩问题

缓存雪崩问题

缓存雪崩是缓存中大量key失效后当高并发到来时导致大量请求到数据库，瞬间耗尽数据库资源，导致数据库无法使用。 解决方案： 1、使用锁进行控制 2、对同一类型信息的key设置不同的过期时间 3、缓存预热 1. 什么是缓存雪崩 缓存雪崩是指在短时间内，大量缓存数据同时失效，导致所有请求直接涌向数据库，瞬间增加数据库的负载压力，可能导致数据库性能下降甚至崩溃。这种情况往往发生在缓存中大量 k
阅读更多...
6.1.数据结构-c/c++堆详解下篇（堆排序，TopK问题）

6.1.数据结构-c/c++堆详解下篇（堆排序，TopK问题）

上篇：6.1.数据结构-c/c++模拟实现堆上篇（向下，上调整算法，建堆，增删数据）-CSDN博客 本章重点 1.使用堆来完成堆排序 2.使用堆解决TopK问题 目录 一.堆排序 1.1 思路 1.2 代码 1.3 简单测试 二.TopK问题 2.1 思路(求最小)： 2.2 C语言代码（手写堆） 2.3 C++代码（使用优先级队列 priority_queue）
阅读更多...
pip-tools：打造可重复、可控的 Python 开发环境，解决依赖关系，让代码更稳定

pip-tools：打造可重复、可控的 Python 开发环境，解决依赖关系，让代码更稳定

在 Python 开发中，管理依赖关系是一项繁琐且容易出错的任务。手动更新依赖版本、处理冲突、确保一致性等等，都可能让开发者感到头疼。而 pip-tools 为开发者提供了一套稳定可靠的解决方案。 什么是 pip-tools？ pip-tools 是一组命令行工具，旨在简化 Python 依赖关系的管理，确保项目环境的稳定性和可重复性。它主要包含两个核心工具：pip-compile 和 pip
阅读更多...
【VUE】跨域问题的概念，以及解决方法。

【VUE】跨域问题的概念，以及解决方法。

目录 1.跨域概念 2.解决方法 2.1 配置网络请求代理 2.2 使用@CrossOrigin 注解 2.3 通过配置文件实现跨域 2.4 添加 CorsWebFilter 来解决跨域问题 1.跨域概念 跨域问题是由于浏览器实施了同源策略，该策略要求请求的域名、协议和端口必须与提供资源的服务相同。如果不相同，则需要服务器显式地允许这种跨域请求。一般在springbo
阅读更多...
题目1254：N皇后问题

题目1254：N皇后问题

题目1254：N皇后问题 时间限制：1 秒 内存限制：128 兆 特殊判题：否 题目描述： N皇后问题，即在N*N的方格棋盘内放置了N个皇后，使得它们不相互攻击（即任意2个皇后不允许处在同一排，同一列，也不允许处在同一斜线上。因为皇后可以直走，横走和斜走如下图)。 你的任务是，对于给定的N，求出有多少种合法的放置方法。输出N皇后问题所有不同的摆放情况个数。 输入
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2