vue-element-admin 前端解决跨域多代理设置方案

在使用vue-element-admin框架进行前端开发时，有时会遇到请求多个不同的地址，官方提供的方案是后端反向代理和前端代理。这里说一下纯前端设置多代理方式来解决问题。

 不设置代理问题

在不设置代理进行直接请求时（这里示例请求腾讯地图开放平台API），会报错：

Access to XMLHttpRequest at 'https://apis.map.qq.com/ws/geocoder/v1/?location=31,117&key=*****' from origin 'http://localhost:9527' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

即涉及到跨域问题。

解决方案——代理设置

目录

       一、 配置环境变量 .env.development

       二、配置 vue.config.js

       三、配置 request.js

       四、设置 api

一、配置环境变量 .env.development

        在.env.development有默认VUE_APP_BASE_API，我们现在为请求腾讯地址API再声明一个全局变量VUE_APP_BASE_API_TX

# 请求后台专用接口全局变量
VUE_APP_BASE_API = '/sys'
# 请求腾讯地址全局变量
VUE_APP_BASE_API_TX = '/ws'

 二、配置 vue.config.js

        配置根目录下的 vue.config.js

        在新版的vue-element-admin中，已经安装好了代理，不需要再进行代理安装。

        在config文件中找到proxy，这里就是进行代理配置的地方。如果在实际的项目中需要请求多个不同的第三方API接口地址，即在proxy中，进行代理配置。

 devServer: {
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    proxy: {
      [process.env.VUE_APP_BASE_API]: {
        target: "http://127.0.0.1/sys",    // 请求的第三方接口地址
        ws: true,
        changeOrigin: true,                // 请求跨域时，需配置此项
        pathRewrite: {                     // 路径重写,替换target中的请求地址
          ["^"+process.env.VUE_APP_BASE_API]: "",
        },
      },
      [process.env.VUE_APP_BASE_API_TX]: {
        target: "https://apis.map.qq.com",    // 请求的第三方接口地址
        ws: true,
        changeOrigin: true,                   // 请求跨域时，需配置此项
        pathRewrite: {                        // 路径重写,替换target中的请求地址
          ["^"+process.env.VUE_APP_BASE_API_TX]: "",
        },
      },
    },
  },

三、配置 request.js

        配置 src/utils/ 下的request.js

        request.js是框架中默认配置的请求拦截器，在request.js中可以对请求和响应进行拦截处理。如果只需要配置一个代理，那直接在request.js中配置即可，因为在本项目中，我们要请求的是腾讯地址的接口，即要进行多个代理，可以也在request.js中进行配置，也可以为配置一个专用的请求拦截器，我们这个是配置了一个专用的请求拦截器，即将request.js文件复制一份，命名为request_tx.js。

import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
import store from '@/store'

// create an axios instance
const serviceTx = axios.create({
  baseURL: process.env.VUE_APP_BASE_API_TX, // url = base url + request url
  timeout: 5000 // request timeout
})
serviceTx.base = '/ws'
// request interceptor
serviceTx.interceptors.request.use(
  config => {
    // do something before request is sent

    // config.headers['token'] = getToken()
    return config
  },
  error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

// response interceptor
serviceTx.interceptors.response.use(
  response => {
    const res = response.data

    // if the custom code is not 20000, it is judged as an error.
    // 这里可根据实际情况，自行对响应进行拦截处理
    if (res.code !== 200) {

      return Promise.reject(new Error(res.message || 'Error'))
    } else {
      return res
    }
  },
  error => {
    console.log('err' + error) // for debug
    return Promise.reject(error)
  }
)

export default serviceTx

       这里对request_tx.js进行了简单处理，没有做过多的配置。

四、设置 api

        配置 /src/api/ 下的请求接口

         在请求不同的第三方时，使用的请求需要以对应，否则会报错。

// 引入请求管理后台文件
import request from '@/utils/request'
// 引入请求腾讯地图文件
import requestTx from '@/utils/request_tx'

 // 获取腾讯地图地址解析接口
 export function getTenctChang(param){
   return requestTx({        // 注意这里请求腾讯地图API，所以使用的是requestTx
     url: '/ws/geocoder/v1/',
     method: 'get',
     params: param,
   })
 }

 // 获取用户信息
 export function getUserInfo(param){
   return request({        // 注意这里请求应用后台API，所以使用的是request
     url: '/user/info',
     method: 'get',
     params: param,
   })
 }

结束

        当所有的配置完成时，在代码中去调用请求方法里，即可以完成请求，解决跨域问题。