【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)重名

相关推荐
栈老师不回家12 分钟前
Vue 计算属性和监听器
前端·javascript·vue.js
前端啊龙18 分钟前
用vue3封装丶高仿element-plus里面的日期联级选择器,日期选择器
前端·javascript·vue.js
一颗松鼠22 分钟前
JavaScript 闭包是什么?简单到看完就理解!
开发语言·前端·javascript·ecmascript
小远yyds42 分钟前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js
程序媛小果1 小时前
基于java+SpringBoot+Vue的宠物咖啡馆平台设计与实现
java·vue.js·spring boot
小光学长1 小时前
基于vue框架的的流浪宠物救助系统25128(程序+源码+数据库+调试部署+开发环境)系统界面在最后面。
数据库·vue.js·宠物
阿伟来咯~2 小时前
记录学习react的一些内容
javascript·学习·react.js
吕彬-前端2 小时前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱2 小时前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai2 小时前
uniapp
前端·javascript·vue.js·uni-app