【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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

2. 结果：跨域
   

3.2 解决跨域：poxy

1. 配置 main.js

// 跨域代码，qualityPlatform可替换为任意

axios.defaults.baseURL = "/qualityPlatform"
1
2
3

2. 配置 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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

3. 调用接口

<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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

4. 调用成功
   

四. 遇到的问题

1. 调用第三方接口，返回 status 为200，但返回 data 为 html 内容
   

2. 原因
   （1）未配置 步骤三 3.2 中 的（1）；
   （2）重名