vue-cli处理跨域问题(备忘)

vuecli处理跨域问题记录

vue-cli2

方式一

1. 找到根目录config文件下的index.js，在 dev 的配置中添加配置

// config/index.js

// 代理配置表，在这里可以配置特定的请求代理到对应的API接口
dev：{
	proxyTable: devEnv.OPEN_PROXY === false ? {} : {
	  '/proxyApi': {
	      target: 'http://192.168.88.62:18802/bsm', // 实际代理地址
	      changeOrigin: true, // 开启代理
	      pathRewrite: {
	        '^/proxyApi': '/' // 如果实际代理地址中不需要使用到 /proxyApi, 则替换为 /
	      }
	   }
	}
}

2. 开发环境的配置，根目录config文件下的 dev.env.js 配置

// config/dev.env.js

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  OPEN_PROXY: true
})

3. Axios封装中的处理:

// utils/request.js

const URL = 'http://192.168.0.1:9000'

/**
 *  跨域请求地址处理
 * @param {*} actionName 需要跨域的地址名
 */
http.adornUrl = (actionName) => {
  // 非生产环境 && 开启代理, 接口前缀统一使用[/proxyApi]前缀做代理拦截!
  return (process.env.NODE_ENV !== 'production' && process.env.OPEN_PROXY ? '/proxyApi' : URL) + actionName
}

/**
 * get请求参数处理
 * @param {*} params 参数对象
 * @param {*} openDefultParams 是否开启默认参数?
 */
http.adornParams = (params = {}, openDefultParams = true) => {
  var defaults = {
    't': new Date().getTime()
  }
  return openDefultParams ? merge(defaults, params) : params
}

4. API请求统一处理

// api/user.js

import request from '@/utils/httpRequest'

// 获取权限
export function getPermission () {
  return request({
    url: request.adornUrl('/sys/menu/nav'),
    method: 'get',
    params: request.adornParams()
  })
}

5. 页面使用

import { getPermission } from '@/api/user'

permissionList(){
	getPermission()
	.then(res => {
	      sessionStorage.setItem('authorities', JSON.stringify(res.authorities || '[]'))
	      next({ ...to, replace: true })
	    }).catch((e) => {
	      console.log(`%c${e} 请求菜单列表和权限失败，跳转至登录页！！`, 'color:red')
	      router.push({ name: 'login' })
	})
}

vue-cli3

暂无