【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. 代码实现
bash 复制代码
<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
bash 复制代码
// 跨域代码,qualityPlatform可替换为任意

axios.defaults.baseURL = "/qualityPlatform"
  1. 配置 config.js
bash 复制代码
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. 调用接口
bash 复制代码
<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)重名

相关推荐
旧林84315 分钟前
第八章 利用CSS制作导航菜单
前端·css
程序媛-徐师姐26 分钟前
Java 基于SpringBoot+vue框架的老年医疗保健网站
java·vue.js·spring boot·老年医疗保健·老年 医疗保健
yngsqq27 分钟前
c#使用高版本8.0步骤
java·前端·c#
Myli_ing1 小时前
考研倒计时-配色+1
前端·javascript·考研
余道各努力,千里自同风1 小时前
前端 vue 如何区分开发环境
前端·javascript·vue.js
PandaCave1 小时前
vue工程运行、构建、引用环境参数学习记录
javascript·vue.js·学习
软件小伟1 小时前
Vue3+element-plus 实现中英文切换(Vue-i18n组件的使用)
前端·javascript·vue.js
醉の虾2 小时前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
张小小大智慧2 小时前
TypeScript 的发展与基本语法
前端·javascript·typescript
hummhumm2 小时前
第 22 章 - Go语言 测试与基准测试
java·大数据·开发语言·前端·python·golang·log4j