axios 全局变量默认Content-Type 无效问题

最新推荐文章于 2024-08-18 03:43:36 发布
最新推荐文章于 2024-08-18 03:43:36 发布
阅读量1w 收藏
点赞数 1
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012555942/article/details/80080762
版权
博客探讨了在使用axios时遇到的全局Content-Type设置无效的问题。通过设置axios.defaults.headers.post['Content-Type']为'application/x-www-form-urlencoded;charset=utf-8'并未能成功解决，后端仍无法接收到数据。解决方案是改用axios.post方法，并配合querystring.stringify(param)传递参数。
摘要由CSDN通过智能技术生成

之前用AJAX直接可以设置类型就可以



使用axios 发现设置了 

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8'

后端依然收不到数据


                

        

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  xmy555
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
axios请求头配置Content-type问题

				
			

			

				

					m0_46769156的博客
				

				

					04-15
					
					3656
					
				

			

		

		

			
				
遇到了什么问题？

前端项目在与后端项目对交接口过程中，出现截取参数为null的情况



数据可以写入数据库，却不能正确截取。

经过不断试错发现，问题出现在前后端接受数据类型并不统一。

前端发送的是application/x-www-form-unlencode

后端接受的是application/json 所以导致不能正确截取参数的情况发生。

什么是请求头中的content-type？

请求头中有两个属性 Accept和Content-Type.

Accept是客户端允许接受服务器的数据类.

			
		

	



                

              
                



	

		

			

				
					
vue的axios使用时，Content-Type 引发的参数接收不到的问题回顾

				
			

			

				

					weixin_40402192的博客
				

				

					10-19
					
					1万+
					
				

			

		

		

			
				
问题来源： 在使用axios时，和java小哥联调，发现调接口服务器始终拿不到参数data，但是检查network也的确传了data，好奇之下，拿了以前的项目翻了下，才有了该文章。

 

基于 vue-axios 和 $.ajax 两种请求方式中数据传输的思考

以java为例，数据传输的起源：

一开始，Java为了实现前后端通信，在http协议允许下，制定了数据传输必须遵守的规则：

 1)...

			
		

	



                


  
              

                


	

		

			

				
					
axios 替换请求头headers

					
最新发布

				
			

			

				

					weixin_40949340的博客
				

				

					08-18
					
					35
					
				

			

		

		

			
				
我整理的一些关于【Java】的项目学习资料（附讲解～～）和大家一起分享、学习一下：https://d.51cto.com/bLN8S1如何使用 Axios 替换请求头（Headers）
在现代 JavaScript 开发中，Axios 是一个非常流行的HTTP请求库，它帮助开发者轻松地发送和管理网络请求。本文将介绍如何使...

			
		

	





	

		

			

				
					
vue axios 请求头的Content-Type没有生效

				
			

			

				

					maggie的博客
				

				

					08-17
					
					2149
					
				

			

		

		

			
				
post请求500但是postMan、apiPost测试都没有问题，发现多了一个 content-type多了application/x-www-form-urlencoded，  axios请求头设置了content-type，但是post请求没有生效，请求时content-type自动改为application/x-www-form-urlencoded，我看了一遍又一遍的代码，写法是没有问题的，因为qs也是用了的。解决方法：降低了axios版本，就好啦。

			
		

	



		

			
		



	

		

			

				
					
axios中设置Content-Type不生效的问题

				
			

			

				

					weixin_30278311的博客
				

				

					08-15
					
					6090
					
				

			

		

		

			
				
Api：axios(config)；
config中无data字段时，headers里的Content-Type无效果，这应该出于优化的层面，此时的Content-Length=0，无需向服务端提供Content-Type字段。

转载于:https://www.cnblogs.com/idiv/p/9482582.html...

			
		

	





	

		

			

				
					
解决axios无法添加content-type

				
			

			

				

					u014788505的博客
				

				

					01-24
					
					1720
					
				

			

		

		

			
				
分两种类型

get请求：

instance.interceptors.request.use(  

        config => {
            // 解决get请求无法添加content-type
            if (config.method === "get") {
                config.data = { unused: 0 }; // 这个是关键点，加入这行就可以了,解决get,请求添加不上Content-Type
        .

			
		

	





	

		

			

				
					
记一次在js中使用axios设置ContentType无效

				
			

			

				

					SiuMu_的博客
				

				

					08-20
					
					2917
					
				

			

		

		

			
				
菜就是菜，菜就是原罪

前言
  为什么要在js中使用axios，直接使用jquery中的ajax不好吗？
  事情是这样的，我用weui写一个页面，但是需要用到日期时间选择控件，我就找了一个，需要引入一个工具叫做zepto.weui.js。但是神奇的是，引入这个东西之后，我直接使用$.ajax失败，怎么都发送不了ajax。把它去掉之后就可以使用ajax了。
就在我想要放弃使用这个控件的时候，我突然发现项目中引入了axios。
  这让我很惊喜，简直是柳暗花明又一村啊，我用它发个简单请求完全没有问题。
问.

			
		

	





	

		

			

				
					
vue+webpack+vue-router+element+axios全家桶搭建vue项目完整教程详解 2019

				
			

			

				

					PGguoqi的博客
				

				

					04-19
					
					8819
					
				

			

		

		

			
				
未完

			
		

	





	

		

			

				
					
【axios】axios入门与源码分析

				
			

			

				

					weixin_58214412的博客
				

				

					03-08
					
					2791
					
				

			

		

		

			
				
一.axios使用

1.json-Server服务搭建

2.axios的介绍与页面配置

3.axios的基本使用

4.axios其他方式发送请求

5.axios请求响应结果的结构

6.axios配置对象详细说明

7.axios的默认配置

8.axios创建实例发送请求

9.axios拦截器

10.axios取消请求

二.axios源码分析

11.axios文件结构说明

12.axios的创建过程详解

13.模拟实现axios对象的创建过程

14.axios发送请求过程详解



			
		

	





	

		

			

				
					
springboot+Vue项目使用axios实现跨域(CROS)

				
			

			

				

					u011930054的博客
				

				

					10-20
					
					5630
					
				

			

		

		

			
				
springboot+Vue项目使用axios实现（CROS）跨域 一、项目背景二、跨域资源共享 CORS 详解三、axios跨域实现四、springboot中实现跨域几种方式
一、项目背景
本文中主要使用springboot项目做后端，Vue做前端，前后端使用axios实现数据交互，前后端分别部署情况：




项目
部署域名




springboot后台项目
http://localhost:8081


vue前端项目
http://localhost:8080


由于前后端部署在两个不同端口下

			
		

	





	

		

			

				
					
源码学习01 Axios

				
			

			

				

					多啦的博客
				

				

					07-31
					
					449
					
				

			

		

		

			
				
Axios是一个基于Promise的HTTP请求库，可以用在浏览器和Node.js中。平时在Vue项目中，经常使用它来实现HTTP请求。

它的使用简便、灵活，并且有interceptors、数据转换器等强大的功能，以前用的时候并没有仔细研究过这些功能是如何实现的，正好在知乎的大前端专栏看到一篇文章对Axios的源码进行了解读。借着这篇文章的帮助，我开始了自己阅读源码的道路。

以后要多多的读源码，更多的独立完成，向大神们学习。

			
		

	





	

		

			

				
					
axios设置请求头无效，采用axios请求拦截实现

					
热门推荐

				
			

			

				

					追梦&天空的博客
				

				

					08-28
					
					2万+
					
				

			

		

		

			
				
在项目实践中，使用axios设置请求头headers，结果在请求过程中请求头中并没有包含headers中设置的请求头信息，而且后台也没有接收到前台设置的请求头信息，导致数据无法进行校验，请求失败


GET 请求方式



import axios from 'axios'

const params = {}
const config = {
    headers: {
        tok...

			
		

	





	

		

			

				
					
axios请求之坑——默认Content-Type: application/json

				
			

			

				

					weixin_34391445的博客
				

				

					09-04
					
					3468
					
				

			

		

		

			
				
在使用axios发送post请求时，默认的请求头Content-Type的属性值为application/json，这个时候浏览器会分两次发送请求，首先使用OPTION方法发送请来询问服务对请求是否支持，若不支持，则报错，终止请求的发送。因此服务器需要配置Access-Control相关的属性才能正确响应。下面是express配置处理一个登录请求的例子：
app.use('/login', (re...

			
		

	





	

		

			

				
					
Axios全局设置header无效的情况

				
			

			

				

					adminxiaofan的博客
				

				

					04-24
					
					1万+
					
				

			

		

		

			
				
请看Axios的中文说明：https://www.kancloud.cn/yunye/axios/234845
最近在搞一次的用户登陆信息的验证，实现方式是放在header里面传递验证。
这类信息是每一个请求都会需要的，很容易想到找一个开放的口子设置就行。
网上查了很久得到的答案就是：
axios.defaults.baseURL = 'https://api.example.com';
axio...

			
		

	





	

		

			

				
					
axios发送post请求headers无法设置Content-Type

				
			

			

				

					weixin_45332196的博客
				

				

					08-18
					
					4405
					
				

			

		

		

			
				
当请求体data为空时，headers里的Content-Type无效果，这应该出于优化的层面，此时的Content-Length=0，无需向服务端提供Content-Type字段。

所以，当请求为不需要携带参数，但是又有Content-Type字段的要求时，最好用get，而非post
...

			
		

	





	

		

			

				
					
axios设置全局请求头

				
			

			

				

					weixin_41752427的博客
				

				

					05-05
					
					1401
					
				

			

		

		

			
				
axios.defaults.headers.common['key'] = value;




			
		

	





	

		

			

				
					
谈谈axios配置请求头content-type

				
			

			

				

					dianzhigan6636的博客
				

				

					04-22
					
					1189
					
				

			

		

		

			
				
现在前端开发中需要通过Ajax发送请求获取后端数据是很普遍的一件事情了，鉴于我平时在撸码中用的是vue技术栈，今天这里来谈谈我们常用的发Ajax请求的一个插件—axios。
> 现在网上可能发送Ajax请求有很多种插件，每种用法可能略有差异，大家只需挑选一种自己喜欢的即可。毕竟现在还有很多人使用jQuery，$.ajax用法也是很多了。
开始
因为需要用到axios插件，所以我们现...

			
		

	





	

		

			

				
					
Vue-Axios使用

				
			

			

				

					码农的专栏
				

				

					10-03
					
					477
					
				

			

		

		

			
				
npm install axios

axios 帮助文档： https://www.kancloud.cn/yunye/axios/234845

main.js


import Vue from 'vue';
import VueRouter from "vue-router";
import App from './App.vue';
import Welcome from './co...

			
		

	





	

		

			

				
					
axios设置请求头content-type

				
			

			

				

					11-19
				

			

		

		

			
				
可以使用axios.defaults.headers来设置请求头中的content-type类型，具体方法如下：
```javascript
// 设置content-type为application/x-www-form-urlencoded
axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded";
```
如果需要发送post请求并将数据以json格式提交到后端，可以使用以下代码：
```javascript
// 设置content-type为application/json
axios.defaults.headers["Content-Type"] = "application/json;charset=utf-8";

// 发送post请求并提交json数据
axios.post(url, {
  data: JSON.stringify(data)
}).then(response => {
  console.log(response);
}).catch(error => {
  console.log(error);
});
```


			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值