【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)重名
    在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/697392.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Git工具实战】实用真实 Git 开发工作流程

前言 最近工作中发现&#xff0c;很多开发人员连最基本的Git怎么使用都不知道&#xff0c;比如什么时候切分支&#xff0c;什么时候合并代码&#xff0c;代码遇到冲突怎么办&#xff0c;经常出现掉代码&#xff0c;代码合并后丢失的情况。以下为个人总结的常规Git开发工作流程…

思腾合力携京东打造服务器采购解决方案,助企业高校提升算力

随着云计算、大数据、人工智能的快速发展&#xff0c;服务器需求不断扩大&#xff0c;市场规模持续保持增长。IDC数据显示&#xff0c;预计2023年我国服务器市场规模将增至308亿美元。基于对服务器市场的趋势洞察&#xff0c;思腾合力携手京东品牌持续深化合作&#xff0c;在保…

深入浅出JVM(六)之前端编译过程与语法糖原理

本篇文章将围绕Java中的编译器&#xff0c;深入浅出的解析前端编译的流程、泛型、条件编译、增强for循环、可变长参数、lambda表达式等语法糖原理 编译器与执行引擎 编译器 Java中的编译器不止一种&#xff0c;Java编译器可以分为&#xff1a;前端编译器、即时编译器和提前编…

(提供数据集下载)基于大语言模型LangChain与ChatGLM3-6B本地知识库调优:数据集优化、参数调整、Prompt提示词优化实战

文章目录 &#xff08;提供数据集下载&#xff09;基于大语言模型LangChain与ChatGLM3-6B本地知识库调优&#xff1a;数据集优化、参数调整、提示词Prompt优化本地知识库目标操作步骤问答测试的预设问题原始数据情况数据集优化&#xff1a;预处理&#xff0c;先后准备了三份数据…

C++:STL简介

1. 什么是STL STL(standard template libaray- 标准模板库 ) &#xff1a; 是 C 标准库的重要组成部分 &#xff0c;不仅是一个可复用的组件库&#xff0c;而且 是一个包罗数据结构与算法的软件框架 。 2. STL的版本 3. STL的六大组件 4.STL的缺陷 1. STL库的更新太慢了。这…

用于将Grafana默认数据库sqlite3迁移到MySQL数据库

以下是一个方案&#xff0c;用于将Grafana数据迁移到MySQL数据库。 背景: grafana 默认采用的是sqlite3&#xff0c;当我们要以集群形式部署的时使用mysql较为方便&#xff0c;试了很多sqlite转mysql的方法要么收费,最后放弃。选择自己动手风衣足食。 目标: 迁移sqlite3切换…

day16_ListSet课后练习题 - 参考答案

文章目录 day16_课后练习题第1题第2题第3题第4题第5题第6题第7题第8题 day16_课后练习题 第1题 案例&#xff1a; ​ 1、用一个String[]数组存点数 ​ 2、用一个String[]数组存花色 ​ 3、用一个String[]数组存大王、小王 ​ 4、用上面的数组&#xff0c;生成一副扑克牌 …

C++ 文件操作-文本文件-读取和打开文件方法详解

读文件步骤 #include <iostream> using namespace std; #include <fstream> #include <string> //文本文件 读文件void test(){// 1 包含头文件// 2 创建流对象ifstream ifs;// 3 打开文件 并且判断是否打开成功ifs.open("table.txt",ios::in); //…

VS 2015 发布 WebService

本文介绍了使用VS2015发布WebService的步骤 右键项目点击发布 选择文件系统和目标位置 配置选择Debug-Any CPU&#xff08;选其他也可以&#xff09; 4. 点击发布&#xff0c;在对应文件夹中可以看到发布出来的内容。 记录遇到的问题&#xff0c; 发布前要选择删除所有现有文…

使用MongoDB数据库和Mongoose库在Node.js中进行数据存储

在Node.js中使用MongoDB数据库和Mongoose库进行数据存储是前端开发中常用的技术之一。MongoDB是一种非关系型数据库&#xff0c;具有高性能、易扩展等优点&#xff1b;而Mongoose是在Node.js中对MongoDB进行操作的框架&#xff0c;简化了数据库操作&#xff0c;并提供了丰富的功…

Js的 Promise的 then catch 笔记240222

Js的 Promise的 then catch 笔记240222 基本用法 new Promise(f>{setTimeout(ev>{f("一秒后输出控制台");},1000); }).then(f的参数>{console.log(f的参数); }); // 控制台输出: 一秒后输出控制台上面代码中, f 的标准名叫做 resolve , 所以应该写成 new …

知识图谱数据处理流程是什么

在当今信息时代&#xff0c;数据已经成为企业决策和业务发展的重要驱动力。然而&#xff0c;随着数据量的不断增加&#xff0c;传统的数据处理方法已经难以满足需求。知识图谱作为一种新兴的技术&#xff0c;正逐渐成为处理大规模数据的关键工具。本文将深入探讨知识图谱的数据…

写代码中的一些“小技巧”

目录 前言 1.不注重代码格式 1.1 空格 1.2 换行 2.随意的命名 2.1 有意义的参数名 2.2 见名知意 2.3 参数名风格一致 3.出现大量重复代码 4.从不写注释 5.方法过长 6.参数过多 7.代码层级太深 8.判断条件太多 9.硬编码 10.事务过大 11.在循环中远程调用 11.1 …

CSS 面试题汇总

CSS 面试题汇总 1. 介绍下 BFC 及其应 参考答案&#xff1a; 参考答案&#xff1a; 所谓 BFC&#xff0c;指的是一个独立的布局环境&#xff0c;BFC 内部的元素布局与外部互不影响。 触发 BFC 的方式有很多&#xff0c;常见的有&#xff1a; 设置浮动overflow 设置为 auto、scr…

【力扣hot100】刷题笔记Day10

前言 一鼓作气把链表给刷完&#xff01;&#xff01;中等题困难题冲冲冲啊啊啊&#xff01; 25. K 个一组翻转链表 - 力扣&#xff08;LeetCode&#xff09; 模拟 class Solution:def reverseKGroup(self, head: Optional[ListNode], k: int) -> Optional[ListNode]:# 翻转…

#LLM入门|Prompt#1.7_文本拓展_Expanding

输入简短文本&#xff0c;生成更加丰富的长文。 “温度”&#xff08;temperature&#xff09;&#xff1a;控制文本生成的多样性。 一、定制客户邮件 根据客户的评价和其中的情感倾向&#xff0c;使用大语言模型针对性地生成回复邮件。将大大提升客户满意度。 # 我们可以在…

两种动态代理(可以看到代理类的样子,方便理解)

这里写目录标题 jdk动态代理例子CGlib动态代理例子手写spring中的事务部分自定义注解版aop实现方式 Spring的两大重点&#xff0c;IOC和AOP&#xff0c;今天我们就来学AOP&#xff0c;众所周知AOP的底层是动态代理&#xff0c;让我们看一下这两种动态代理的区别。 例子&#x…

【结合OpenAI官方文档】解决Chatgpt的API接口请求速率限制

OpenAI API接口请求速率限制 速率限制以五种方式衡量&#xff1a;RPM&#xff08;每分钟请求数&#xff09;、RPD&#xff08;每天请求数&#xff09;、TPM&#xff08;每分钟令牌数&#xff09;、TPD&#xff08;每天令牌数&#xff09;和IPM&#xff08;每分钟图像数&#x…

BUUCTF第二十四、二十五题解题思路

目录 第二十四题CrackRTF 第二十五题[2019红帽杯]easyRE1 第二十四题CrackRTF 查壳 无壳&#xff0c;32位&#xff0c;用32位IDA打开&#xff0c;打开后的main函数很短&#xff0c;可以找到一句“jmz _main_0”——跳转到 _main_0&#xff0c;说明真正的主函数是_main_0&am…

React 模态框的设计(二)

自定义组件是每个前端开发者必备的技能。我们在使用现有框架时难免有一些超乎框架以处的特别的需求&#xff0c;比如关于弹窗&#xff0c;每个应用都会用到&#xff0c;但是有时我们使用的框架中提供的弹窗功能也是功能有限&#xff0c;无法满足我们的应用需求&#xff0c;今天…