vue3+cli-service配置代理，跨域请求

一、配置代理端口和代理转发

在vue.config.js文件中 

const {defineConfig} = require('@vue/cli-service')
 
module.exports = defineConfig({
    devServer: {
        host: '0.0.0.0',
        port: 8088,  // 启动端口号
        proxy: {
            '/api': { 
                // 请求接口中要替换的标识
                target: '', 
                // 代理地址，后端地址
                ChangeOrigin: true, 
                // 是否允许跨域
                pathRewrite: {
                    '^/api': '' 
                // 这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add'，直接写‘/api/user/add’即可
                }
            }
        }
    }
})

二、配置接口请求

是一个http.js文件，根据自己需求放在适合的文件夹里，文件名自己也可以定义

import axios from 'axios'
const isDev = process.env.NODE_ENV === 'development'
const instance = axios.create({
  //TODO 部署修改线上地址
  // baseURL: isDev ? 'http://localhost:8088/api' : '线上地址',
  baseURL: '/api',
  timeout: 10000,
  withCredentials: true,
})

// 添加响应拦截器
instance.interceptors.response.use(
  function (response) {
    // 前端发送请求成功
    const res = response.data

    //根据返回的code值来做不同处理
    // 请求失败，返回错误信息
    if (res.code !== 0) {
      // 未登录跳转登录页面
      if (res.code === 40100) {
        const redirectUrl = window.location.href
        window.location.href = `/user/login?redirect=${redirectUrl}`
      }
      console.error('request error', res.message)
      return res.message
    }
    return res
  },
  function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    return Promise.reject(error)
  },
)

/**
 * get请求
 * @param url 请求地址
 * @param params 请求参数
 */
export function getRequest(url, params) {
  return instance({
    method: 'GET',
    url: `${url}`,
    params: params,
  })
}

/**
 * post请求
 * @param url 请求地址
 * @param data 请求数据
 * @returns {Promise}
 */
export function postRequest(url, data) {
  return instance({
    method: 'POST',
    url: `${url}`,
    data,
  })
}

export default instance

在api/indexjs文件里使用

import { getRequest, postRequest } from '@/plugins/requestConfig'

export const userLogin = (params) => {
  return postRequest('/user/login', params)
}

注意：

1、代理地址target后面不要加注释，线上可能会报错

2、本地测试的时候baseURL: '/api'和proxy里的'/api'名字保持一致，且必须有不然会报跨域

3、pathRewrite里的'^/api': '' "跟后端保持一致，如果后端接口里有api可以不用加，如果没有则需要进行该处理，不然接口请求会报404，