vue跨域和传参问题解决办法

最新推荐文章于 2022-12-26 21:28:47 发布
置顶 最新推荐文章于 2022-12-26 21:28:47 发布
阅读量896 收藏 2
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qxh_1/article/details/111636832
版权

跨域

先在config文件夹下的index.js文件里找到proxTable

target是你的目标地址

changeOrigin是否跨域，选择true

pathRewrite为访问前缀

再到config文件夹下 的main.js文件中添加上面几行代码

引入axios

设置axios访问前缀

添加axios变量到 Vue.prototype

然后在页面通过：this.$axios.post/get("(要访问的方法链接）")方式访问后台方法即可

 

传参

到config文件夹下 的main.js文件中添加上面几行代码

引入qs

添加qs变量到 Vue.prototype

 

再通过页面   this.$qs.stringify({id: userid}) 的方式将参数转化成后台接收的格式

                

        

        

    




    

      

        

            

              
                
                  Autism_Autism
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    2
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                  1
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
URL传参时，参数包含有特殊字符（%、#、&）的处理方法

				
			

			

				

					weixin_48414904的博客
				

				

					06-30
					
					2万+
					
				

			

		

		

			
				
uniapp项目中页面跳转时，通过url传参，参数为一个包含特殊的字符的对象并内容比较多，导致不能正常传参

			
		

	



                

              
                



	

		

			

				
					
vue.js学习之 跨域请求代理与axios传参

				
			

			

				

					weixin_34341229的博客
				

				

					12-06
					
					167
					
				

			

		

		

			
				
vue.js学习之 跨域请求代理与axios传参
一：跨域请求代理
1：打开config/index.js

module.exports{
    dev: {
    }
}


在这里面找到proxyTable{}，改为这样：

proxyTable: {
      '/api': {
        target: 'http://121.41.130.58:...

			
		

	



                


  
              

                


	

		

			

				
					
vue配置代理服务器proxy

				
			

			

				

					weixin_49516521的博客
				

				

					11-01
					
					1万+
					
				

			

		

		

			
				
跨域，代理服务器配置方法

			
		

	





	

		

			

				
					
在vue中如何获取项目src外层的config目录以及api接口proxy的target代理地址

				
			

			

				

					商务合作 / 项目定制开发 / 前端一对一培训、答疑
				

				

					11-29
					
					3991
					
				

			

		

		

			
				
因为后端proxy接口是放置在src外面的config目录中的，如果要方便获取，可以设置类似于用@代表src一样的路径别名。
需求是某个接口需要服务器的hostname和port，这时就需要知道后端代理地址。比如下方的target地址。

			
		

	



		

			
		



	

		

			

				
					
跨域问题全解析

				
			

			

				

					withoutfear的博客
				

				

					12-04
					
					135
					
				

			

		

		

			
				
跨域这两个字就像一块狗皮膏药一样黏在每一个前端开发者身上，无论你在工作上或者面试中无可避免会遇到这个问题。为了应付面试，我每次都随便背几个方案，也不知道为什么要这样干，反正面完就可以扔了，我想工作上也不会用到那么多乱七八糟的方案。到了真正工作，开发环境有webpack-dev-server搞定，上线了服务端的大佬们也会配好，配了什么我不管，反正不会跨域就是了。日子也就这么混过去了，终于有一天，我觉得不能再继续这样混下去了，我一定要彻底搞懂这个东西！于是就有了这篇文章。

要掌握跨域，首先要知道为什么会有跨域

			
		

	





	

		

			

				
					
vue路由传参页面刷新参数丢失问题解决方案

				
			

			

				

					10-16
				

			

		

		

			
				
在使用这些存储机制时，需要注意数据大小限制（通常SessionStorage和LocalStorage的容量为5MB），以及跨域问题。同时，确保处理好数据安全和隐私问题，因为这些数据存储在客户端，容易被用户访问。  总的来说，面对...

			
		

	





	

		

			

				
					
VUE经典面试题目包含答案

				
			

			

				

					05-05
				

			

		

		

			
				
Vue.js 是一款流行的前端框架，其在构建用户界面时提供了丰富的特性和便利性。...以上是对Vue.js面试中常见问题的详细解答，涵盖了Vue的基础知识、高级特性以及最佳实践，希望能对面试和实际开发有所帮助。

			
		

	





	

		

			

				
					
vue2 以及小程序面试题文档，帮助你快速了解，vue2框架以及小程序的核心

				
			

			

				

					03-15
				

			

		

		

			
				
Vuex是一个专为Vue.js应用程序开发的状态管理模式，用于管理应用状态，解决组件间数据传递和共享的问题。 2.2 Vuex的五大核心：state（状态）、mutations（状态变更函数）、actions（异步操作）、getters（计算属性...

			
		

	





	

		

			

				
					
面试题资源，涉及vue，js，node，html，css，webpack等等

				
			

			

				

					04-24
				

			

		

		

			
				
本资源总结涵盖了vue、js、node、html、css、webpack等多个领域的知识点，涉及到变量提升、闭包、this指向、数组和对象的遍历、map和forEach的区别、箭头函数和普通函数的区别、同源策略、跨域解决方案、严格模式的...

			
		

	





	

		

			

				
					
在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法

				
			

			

				

					12-10
				

			

		

		

			
				
最近，在项目中使用到了layer。layer的弹层组件可以说是非常好用，layer 至今仍作为 layui 的代表作。在项目中，需要实现一个在表格里面点击操作，然后弹出layer层，将父层表格的行值传给子页面，子页面拿到值后，...

			
		

	





	

		

			

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

				
			

			

				

					m0_62877814的博客
				

				

					12-26
					
					324
					
				

			

		

		

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

			
		

	





	

		

			

				
					
前端后端联调解决URL作为参数发生跨域问题

				
			

			

				

					似水流年，是谁苍白了等待
				

				

					01-27
					
					1113
					
				

			

		

		

			
				
在前后端联调时，把url作为参数传递给后端，结果出现问题，原因是在发送请求的时候在浏览器从正确请求中会解析到两个域名，所以到后端的时候就会出现跨域问题，至于什么是跨域请参考https://www.jianshu.com/p/f049ac7e2220

解决办法

方法一：

将前端需要作为参数的url编码，如下代码


urls:encodeURIComponent(encodeURIComponent("https://blog.csdn.net")),

后端进行对传递过来的代码就行解码，为“U...

			
		

	





	

		

			

				
					
Vue学习总结-Vue前端解决跨域问题

					
热门推荐

				
			

			

				

					白不懂黑的静的专栏
				

				

					12-02
					
					1万+
					
				

			

		

		

			
				
场景

在vue开发中，我们采用前后端分离的模式进行开发，

则前端渲染的数据都需要从后端获得，这样就会带来跨域问题。



思路

解决跨域问题，正常情况下有两种，既然涉及到两端，那么大的就是从两端各自处理。

第一种：从后端处理。就是在后端代码中通过过滤器等方式允许请求进行跨域访问，

这种方法在之前的springboot文档中有记录，此处不再叙述。

第二种：从前端vue处理，vue提供了相关的配置，通过代理的方式进行跨域请求。

这里着重记录下第二种，因为我们开发中，没法要求后端都去给你写允许跨域请

			
		

	





	

		

			

				
					
Vue向后台接口传参为什么会出错或者传不过去?

				
			

			

				

					Heby的博客
				

				

					07-29
					
					2725
					
				

			

		

		

			
				
首先,你要确定传参的数据类型,这个后台一般会说,不仔细说明

其次,传参的方法出错了(重点说这个) 当你获取接口的方法为post的时候,你传参的方法可以是data或者params两种方法之一,但是你获取接口的方法是get时候,你只能通过params进行传参








...

			
		

	





	

		

			

				
					
前端vue发送给后端MVC跨域问题

				
			

			

				

					weixin_73849581的博客
				

				

					12-06
					
					515
					
				

			

		

		

			
				
跨域问题

			
		

	





	

		

			

				
					
解决Vue跨域访问后端API问题

				
			

			

				

					pukun888的博客
				

				

					05-07
					
					4813
					
				

			

		

		

			
				
文章目录前言一、vue.config.js文件二、配置代理参数总结

前言
我们在写前后端分离的时候，请求后端接口是必要步骤，但是这个时候就有个问题，因为前段和后端是归属于不同端口，我们在直接访问后端时，会触发csrf（跨站请求伪造）

一、vue.config.js文件
vue项目中可选的配置文件，你可以选择用这个文件去配置vue项目，也可以选择在package.json文件中vue字段去配置，但是你需要严格按照json的写法

提示：我创建完项目之后，里面没有vue.config.js文件，所以我自己在

			
		

	





	

		

			

				
					
vue中后台报跨域问题

				
			

			

				

					weixin_45294459的博客
				

				

					10-18
					
					276
					
				

			

		

		

			
				
解决办法：

建一个vue.config.js文件夹放入以下内容



module.exports={

 // 配置彻底懒加载

 chainWebpack:config=>{

  // 删除属性为prefetch的link标签

  config.plugins.delete("prefetch")

 },

 // 配置客户端http代理跨域请求

 // 起一个开发服务器

 devServer:{

 // 代理

  proxy:{

   // 别名......

			
		

	





	

		

			

				
					
Vue跨域解决方法

				
			

			

				

					weixin_51412569的博客
				

				

					09-05
					
					9197
					
				

			

		

		

			
				
vue跨域


			
		

	





	

		

			

				
					
vue跨域问题及post传参

				
			

			

				

					zuo_zuo_blog的博客
				

				

					12-02
					
					1210
					
				

			

		

		

			
				
方案一：
在config.index.js中设置webpack
最初的方案是前台传JSON格式的数据过去；设置’Content-Type’:

'application/json;charset=UTF-8'，大概：
axios.post('/user',JSON.stringify(params),{
	headers: {
        'Content-Type': 'applicati...

			
		

	





	

		

			

				
					
sprigboot和vue跨域问题

					
最新发布

				
			

			

				

					04-19
				

			

		

		

			
				
3. 如果使用了代理服务器（如Nginx），可以在代理服务器中进行跨域配置，将Vue.js前端的请求转发到Spring Boot后端，并解决跨域问题。  以上是解决Spring Boot和Vue.js跨域问题的一般方法。具体的配置和实现方式可以...

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		
评论 1

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值