vue配置代理解决项目内访问第三方接口跨域问题,多个代理的使用

概述,项目内已解决跨域问题.但是只是和后台的跨域解决了,使用第三方,腾讯地图api又跨域了, 我是用的地理位置解析.将位置转换为经纬度的腾讯api

今天我知道为啥要用插件了,因为跨域完全在前端解决的,之前都是同一个域名访问,现在丢到后台,服务器地址访问第三方跨域了.既然大家都用jsonp.那我也用,但是jsonp不就是创建一个script标签吗.为嘛要下载插件,又二次封装,直接封装一个原生不香吗,往下翻翻翻

but!!! jsonp仅限于get请求,所以还是代理吧.线上就靠后台了

• 跨域了 百度的全是安装一个jsonp的插件,有axios为什么还要装它,你都能解决跨域了,还在下载一个别的跨域插件吗 解决办法就是再设置一个代理,语序跨域,地址指向第三方,多个代理访问会不会混,我是其他请求都在封装的request内,所以其他接口都是指向/api,代理名称要写对
• 做法

1.我是已经封装了axios的requst文件,所以.这个单独请求直接写了

1. 1.

vue.config.js
/**腾讯 */
    '/qq': {
            target: 'https://apis.map.qq.com',
            changeOrigin: true,
            ws: true,
            pathRewrite: {
                    '^/qq': ''
            }
        }
        
//api.js文件
import axios from 'axios'
/**请求腾讯接口获取经纬度 */
export function getLongAndLat(keyWords) {
	return new Promise(function(resolve, reject) {
		axios('/qq/ws/geocoder/v1/?address=' + keyWords + '&key=自己的key')
			.then(response => {
				if (response.data.status == 0) {
					resolve(response.data)
				} else {
					reject(response.data)
				}
			})
			.catch(err => {
				reject(err)
			})
	})
}
//.vue文件
import { getLongAndLat } from '@/api/common'

getLongAndLat(address)
    .then(res => {
            this.form.longitude = res.result.location.lng
            this.form.latitude = res.result.location.lat

    })
    .catch(err => {
            if (err.status === 347) {
                    this.$message.error(`填写地址转换失败`)
            } else {
                    this.$message.error(err.message)
            }

            this.fullscreenLoading = false
    })

会有几个报错情况,参考腾讯文档.需要单独处理的就catch

get请求第三方跨域 jsonp.js 封装一个js,注:看个人使用场景自己封装,我封装的是简易的,因为能解决我的问题

const Jsonp = url => {
	//1 自己需要接收的返回函数
	let callbackName = 'callback_' + (new Date() - 0)
	// 2 动态创建script标签
	const script = document.createElement('script')

	//get请求参数自己品号再传过来,这里只有自己设置自己需要接受的函数名字,因为传到后台的函数名字是定死的
	script.src = url + callbackName
	//script插入到dom中
	document.head.appendChild(script)

	return new Promise(resolve => {
		// 给window添加一个函数，就相当于全局函数
		window[callbackName] = function(data) {
			// data 就是 JSONP接口返回的数据
			// 讲jsonp返回的数据 resolve给调用的地方接收,这里不做处理
			resolve(data)
			// 删除掉添加给window的属性
			delete window[callbackName]
			// 移除 script 标签
			document.head.removeChild(script)
		}
	})
}

export default Jsonp



api.js

我写了两种,其实写一个jsonp就可以了.

import jsonp from "@/utils/jsonp"


export function getLongAndLat(keyWords) {
	//生产环境解决第三方跨域
	if (process.env.NODE_ENV === 'production') {
		return new Promise(function(resolve, reject) {
			jsonp(
				'https://apis.map.qq.com/ws/geocoder/v1/?address=' +
					keyWords +
					'&key=******&output=jsonp&callback='
			).then(response => {
				if (response.status == 0) {
					resolve(response)
				} else {
					reject(response)
				}
			})
		})
	} else {
		//开发环境用代理
		return new Promise(function(resolve, reject) {
			axios('/qq/ws/geocoder/v1/?address=' + keyWords + '&key=******')
				.then(response => {
					if (response.data.status == 0) {
						resolve(response.data)
					} else {
						reject(response.data)
					}
				})
				.catch(err => {
					reject(err)
				})
		})
	}
}