前端配置多个跨域问题的一次处理过程

• 用的是 proxy代理 做跨域处理

• vue.config.js 中

devServer: {

    proxy: {
      '/index.php': {
        target: 'http://preapiconsole.91.com/api/app/obor-nginx-php/', // 需要代理的域名
        changeOrigin: true, //开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求
        pathRewrite: {  //重写匹配的字段，如果不需要在请求路径上，重写为""
          '^/index.php': ''
        }
      },
      // 最后会这样请求数据 http://preapiconsole.91.com/api/app/obor-nginx-php/index.php  
      '/index_upload.php': {
        target: 'https://preapiconsole.91.com/',
        changeOrigin: true,
        pathRewrite: {
          '^/index_upload.php': ''
        }
      },
      '/index.java': {
        target:'http://luyingying91.oa.nbseo.cn/',
        changeOrigin: true,
        pathRewrite: {
          '^/index.java': ''
        }
      }
    }
  }

• api的接口 在创建axios的时候，beseURL这样配置 + 适用于同一个域名下不同(/api, /php)的代理情况

const ajax = axios.create({
    baseURL:"/",
    timeout: 5000,//请求超时时间
})


export function getData() { //get
  return request({
    url: '/index.php/search/home',
    method: 'GET'
  })
}
export function getData1() { //get
  return request({
    url: 'index_upload.php/search/home',
    method: 'GET'
  })
}

适用于不同一个域名(www.baidu.com/,www.google.cn/)不同(/api, /php)的代理情况

+ 上传 图片或者视频的 地址为这个 会解析成
+  https://preapiconsole.91.com/index_upload.php/file/upload

if (process.env.NODE_ENV === 'development') this.upload.action = '/index_upload.php/file/upload'

• 根据不同的跨域我是做了不同的axios请求

// service_bpf
import axios from 'axios'
import store from "../store";
import { getToken,setToken, removeToken } from './cookie'
import {Message} from "element-ui";
const consoleURL = process.env.VUE_APP_7_OPEN

let baseURL = '';

if (process.env.NODE_ENV === 'development') {
  baseURL = '/index.php';
}
else{
  baseURL = process.env.VUE_APP_BASE_API_BPF
}

const service_bpf = axios.create({
  baseURL,
  timeout: 100000, // 请求超时时间
  headers: {
    'X-Server-Name': 'ty'
  }
})
// request拦截,在请求发起前搞事情
service_bpf.interceptors.request.use((config) => {
  config.headers['X-Server-Name'] ='ty';
  if (process.env.NODE_ENV === 'development') {
  
  }

  if (getToken()) { // 测试环境
    config.headers['X-Token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
  }
  return config
})

// respone拦截,获取请求数据后，搞事情
service_bpf.interceptors.response.use(
    // 正常获取数据

    response => {
      if (response.data && response.data.code === 200) {
        return response.data
      } else {
        if (response.data.code === 401) {
          removeToken('X-Token')
          window.location.href = consoleURL + 'login/login?backUrl=' + escape(window.location.href)  // 单点登录的设置
          return Promise.reject(response.data)
        } else if (response.data.code === 403) {
          // 抱歉，你无权访问该页面
          // router.push('/403')
          console.log(response)
          window.location.href = consoleURL + '403'
        } else {
          let url = response.config.url
          let apiURL = url.substring(baseURL.length)
          if(apiURL.indexOf('/') === 0){
            apiURL = apiURL.substring(1)
          }
          // 当请求的接口是【中文站-任务列表】不需要弹框
          if(apiURL === ('tweb/site/taskList') || apiURL === ('tweb/statistic/getDataBydate') || apiURL === ('tweb/enSite/getManageUrl') || apiURL === ('tweb/site/getDesktopUrl') || (apiURL === ('tweb/statistic/pagetopn') && response.data.message === '该用户尚未开通流量统计！') || (apiURL === ('tweb/Statistic/getCount') && response.data.message === '该用户尚未开通流量统计！') || (apiURL === ('tweb/statistic/getCountryData') && response.data.message === '该用户尚未开通流量统计！') || (apiURL === ('tweb/site/statisticsInfo') && response.data.message === '2.0网站接口调用失败！')) {
            return Promise.reject(response.data)
          }
          let message = response.data.message ? response.data.message : response.data.data.msg ? response.data.data.msg: response.data.data.data.msg ? response.data.data.data.msg: '接口异常'
          Message({type: 'error', message: message})
          return Promise.reject(response.data)
        }
      }
    },
    // 请求失败
    error => {
      console.log('请求错误',error)
      return Promise.reject('error', error)
    },
)

export default service_bpf

// request_yun
import axios from 'axios'
import { Message } from 'element-ui'
import Cookies from 'js-cookie'
const service = axios.create({
  baseURL: process.env.VUE_APP_UPLOAD,
  timeout: 3600 * 1000 // request timeout
})


service.interceptors.request.use(config => {
  if (Cookies.get('X-Token') && Cookies.get('X-Token') !== undefined) {
    config.headers['X-Token'] = Cookies.get('X-Token')
  }

  return config
}, error => {
  console.log(error) // for debug
  Promise.reject(error)
})
service.interceptors.response.use(
  response => {
    if (response.data && response.data.code === 200) {
      return response.data
    }
    if (response.data && response.data.code === 511) {
      return response.data
    } else {
      if (response.data.code === 401 || response.data.code === 101) {
        // store.commit('app/set_login_dialog_isShow', true)
      }
      return Promise.reject(response.data)
    }
  },
  error => {
    console.log('err' + error) // for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  })

export default service

• 设置不同的请求

import request from '@/base/service_bpf'
import yunAjax from '@/base/request_yun'

// 文件管理列表页
export function getFolderList (data) {
  return request({
    url: '/admin/image',
    method: 'GET',
    params: data
  })
}

// 创建文件夹接口
export function createFolder (data) {
  return request({
    url: '/admin/image/mkdir',
    method: 'POST',
    data
  })
}

/// yunAjax 的
export function getyunFolderList (data) {
  return yunAjax({
    url: '/file/list',
    method: 'GET',
    params: data
  })
}


export function uploadyunfile (data) {
  return yunAjax({
    url: '/file/upload',
    method: 'POST',
    data
  })
}

此方法比较麻烦 应该动态的改变baseUrl

• 根据不同的环境(dev,pre,prod)不同的跨域

env.dev
env.pre
env.prod

baseURL: process.env.API

不同域名服务下接口配置

const cdpBaseURL = process.env.VUE_APP_BASE_API + '/cdp-wc'

const requestNew = (data) => {
  return request({
    ...data,
    ...{
      baseURL: cdpBaseURL
    }
  })
}
// 查询分析事件行为
export const getEventAction = () => {
  return requestNew({
    url: '/analysis/queryEventActionV2',
    method: 'post'
  })
}

跨域配置

  devServer: {
    port: '8080',
    open: true,
    hot: true,
    disableHostCheck: true,
    clientLogLevel: 'warning',
    overlay: {
      warnings: false,
      errors: true
    },
    proxy: {//非开发环境，注释（后端本地ip）
      '/dev-api': {
        target: 'http://192.888.66.4:8080',
        secure: false,
        changeOrigin: true, // 是否跨域
        pathRewrite: {
          '^/dev-api': ''  // 让后台接口并不需要都以 /dev-api/***/***开头
        }
      }
    }
  }