【Vue】本地使用 axios 调用第三方接口并处理跨域

前端处理跨域

一. 开发准备

  1. 开发工具:VScode
  2. 框架:Vue2
  3. 项目结构:vue脚手架生成的标准项目(以下仅显示主要部分)
    在这里插入图片描述
  4. 本地已搭建好的端口:8080
  5. 要请求的第三方接口:http://1.11.1.111:端口号/xxx-api/code

注意:前端环境已搭建好,必须确保axios 已下载

二. 需求分析

  1. 前端登录页(login - index.vue)的验证码需调用第三方的验证码接口,并将其显示
    在这里插入图片描述

三. 跨域

3.1 直接调用(跨域)

  1. 代码实现
<script>
import axios from "axios";
export default {
	data(){
		return {
		}
	},
	methods:{
		fetchCode(){
			axios.get('http://1.11.1.111:端口号/xxx-api/code').then(res=>{
				console.log(res,"直接调用第三方接口")
			}) 
		}
	}
}
</script>
  1. 结果:跨域
    在这里插入图片描述

3.2 解决跨域:poxy

  1. 配置 main.js
// 跨域代码,qualityPlatform可替换为任意

axios.defaults.baseURL = "/qualityPlatform"
  1. 配置 config.js
module.exports = {
	dev:{
		assetsSubDirectory: 'static',
    	assetsPublicPath: '/',
		proxyTable: {                                     //  配置多个代理
      		'/qualityPlatform': {
      		  	  target: 'http://1.11.1.111:端口号',
      			  pathRewrite: {
      				  '^/qualityPlatform': '/'
      			  },
      			  changeOrigin: true
     		},
      		'/api': {
        		  target: 'http://localhost:80', 		// 本地后端抛出的接口
        		  secure: false,
        		  pathRewrite: { 						// 路径重写
          			  '^/api': '/' 						// 替换target中的请求地址
        		  },
        	      changeOrigin: true 					// 在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
      	    },
    	},
    	host: '0.0.0.0', 
    	port: 8080, 
    	autoOpenBrowser: false,
    	errorOverlay: true,
    	notifyOnErrors: true,
    	poll: false, 
	}
}
  1. 调用接口
<script>
import axios from "axios";
export default {
	data(){
		return {
			form:{
				img:""
			}
		}
	},
	methods:{
		fetchCode(){
			axios.get('/xxx-api/code').then(res=>{
				console.log(res,"直接调用第三方接口成功")
				// 处理base64编码并展示
				this.form.image = `data:image/jpeg;base64,${res.data.img}`;
			}).catch(error=>{
        		console.log(error,"ERROR");
      		})
		}
	}
}
</script>
  1. 调用成功
    在这里插入图片描述

四. 遇到的问题

  1. 调用第三方接口,返回 status 为200,但返回 data 为 html 内容
    在这里插入图片描述

  2. 原因
    (1)未配置 步骤三 3.2 中 的(1);
    (2)重名
    在这里插入图片描述

  • 7
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Vue使用axios调用多个接口跨域问题可以通过设置代理来解决。 1. 首先,在Vue项目根目录下找到config文件夹中的index.js文件。 2. 打开index.js文件,找到dev对象中的proxyTable选项。该选项允许我们配置代理。 3. 在proxyTable选项中添加以下代码: ```javascript proxyTable: { '/api1': { target: 'http://localhost:8000', changeOrigin: true, pathRewrite: { '^/api1': '/api1' } }, '/api2': { target: 'http://localhost:8001', changeOrigin: true, pathRewrite: { '^/api2': '/api2' } } } ``` 此处使用了两个接口作为示例,一个是/api1,另一个是/api2。target参数指定了代理的目标地址,需要根据实际情况进行修改。changeOrigin参数用于配置是否跨域,默认为false,需要设置为true。pathRewrite参数用于重写请求路径,可以根据需要进行修改。 4. 保存并关闭index.js文件。 5. 在Vue组件中使用axios调用接口时,只需要将接口的路径改为对应的代理路径,例如: ```javascript axios.get('/api1/users') .then(response => { // 处理接口1的响应 }) .catch(error => { // 处理接口1的错误 }); axios.get('/api2/posts') .then(response => { // 处理接口2的响应 }) .catch(error => { // 处理接口2的错误 }); ``` 以上代码中,/api1和/api2就是代理路径,可以直接在axios使用。 通过以上步骤,我们成功地解决了在Vue使用axios调用多个接口跨域问题。注意,在开发环境下使用代理是安全的,但在生产环境要将代理改为实际的服务器地址。

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值