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

前端处理跨域

一. 开发预备

• 开发工具：VScode
  
• 框架：Vue2
  
• 项目结构：vue脚手架天生的尺度项目（以下仅表现告急部分）
  
  
  
  
• 本地已搭建好的端口：8080
  
• 要请求的第三方接口：http://1.11.1.111:端口号/xxx-api/code
  

注意：前端环境已搭建好，必须确保axios 已下载
二. 需求分析

• 前端登录页（login - index.vue）的验证码需调用第三方的验证码接口，并将其表现
  
  
  
  

三. 跨域

3.1 直接调用（跨域）

• 代码实现
  

1. <script>
2. import axios from "axios";
3. export default {
4.         data(){
5.                 return {
6.                 }
7.         },
8.         methods:{
9.                 fetchCode(){
10.                         axios.get('http://1.11.1.111:端口号/xxx-api/code').then(res=>{
11.                                 console.log(res,"直接调用第三方接口")
12.                         })
13.                 }
14.         }
15. }
16. </script>

复制代码

• 效果：跨域
  
  
  
  

3.2 解决跨域：poxy

• 配置 main.js
  

1. // 跨域代码，qualityPlatform可替换为任意
3. axios.defaults.baseURL = "/qualityPlatform"

复制代码

• 配置 config.js
  

1. module.exports = {
2.         dev:{
3.                 assetsSubDirectory: 'static',
4.             assetsPublicPath: '/',
5.                 proxyTable: {                                     //  配置多个代理
6.                       '/qualityPlatform': {
7.                                   target: 'http://1.11.1.111:端口号',
8.                                 pathRewrite: {
9.                                         '^/qualityPlatform': '/'
10.                                 },
11.                                 changeOrigin: true
12.                      },
13.                       '/api': {
14.                           target: 'http://localhost:80',                 // 本地后端抛出的接口
15.                           secure: false,
16.                           pathRewrite: {                                                 // 路径重写
17.                                     '^/api': '/'                                                 // 替换target中的请求地址
18.                           },
19.                       changeOrigin: true                                         // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
20.                   },
21.             },
22.             host: '0.0.0.0',
23.             port: 8080,
24.             autoOpenBrowser: false,
25.             errorOverlay: true,
26.             notifyOnErrors: true,
27.             poll: false,
28.         }
29. }

复制代码

• 调用接口
  

1. <script>
2. import axios from "axios";
3. export default {
4.         data(){
5.                 return {
6.                         form:{
7.                                 img:""
8.                         }
9.                 }
10.         },
11.         methods:{
12.                 fetchCode(){
13.                         axios.get('/xxx-api/code').then(res=>{
14.                                 console.log(res,"直接调用第三方接口成功")
15.                                 // 处理base64编码并展示
16.                                 this.form.image = `data:image/jpeg;base64,${res.data.img}`;
17.                         }).catch(error=>{
18.                         console.log(error,"ERROR");
19.                       })
20.                 }
21.         }
22. }
23. </script>

复制代码

• 调用成功
  
  
  
  

四. 遇到的问题

• 调用第三方接口，返回 status 为200，但返回 data 为 html 内容
  
  
  
  
• 缘故原由
  （1）未配置 步骤三 3.2 中 的（1）；
  （2）重名
  
  
  
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。