vue.js 前端 javascript 【Vue】本地使用 axios 调用第三方接口并处理跨域

前端处理跨域

一. 开发准备

开发工具：VScode框架：Vue2项目结构：vue脚手架生成的标准项目（以下仅显示主要部分） 本地已搭建好的端口：8080要请求的第三方接口：http://1.11.1.111:端口号/xxx-api/code

注意：前端环境已搭建好，必须确保axios 已下载

二. 需求分析

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

三. 跨域

3.1 直接调用（跨域）

代码实现

结果：跨域

3.2 解决跨域：poxy

配置 main.js

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

axios.defaults.baseURL = "/qualityPlatform"

配置 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,

}

}

调用接口

调用成功

四. 遇到的问题

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

推荐文章