一个vue项目中访问两个服务器地址出现跨域问题，axios直接使用，跨域问题解决后还报404解决

项目情况：一个vue项目需要的数据在两台服务器上，前端访问就出现了两次跨域问题
一、解决跨域问题

在webpack.config.js或者vue.config.js中找到devServer
并在下面用代理：
target就是服务器地址

proxy内的代码如下：

//proxy内的代码
proxy: {
      // 第一台服务器配置 
      '/gosd': {
        target: process.env.SUPERDOCK_API_SERVER || 'https://***.***.*.***:8080',//这里填写项目真实的后台接口地址
        pathRewrite: { '^/gosd':  '' },
        changeOrigin: true //设置允许跨域
      },
      // 第二台服务器配置 
      '/watwise_war': {
        target: 'http://192.168.0.105:8080',//这里填写项目真实的后台接口地址
        //这个重写不可省略！因为我们真正请求的地址并不含 /watwise_war
        // pathRewrite: { '^/watwise_war':  '' },
        //这个重写不可省略！因为我们真正请求的地址包含 /watwise_war
        pathRewrite: { '^/watwise_war':  '/watwise_war' },
        changeOrigin: true //设置允许跨域
      }
    }

二、axios直接使用

如果没有安装axios，先安装axios
然后在pages同级目录下的until下封装request.js文件请求服务的js，在js中调用axios
request.js文件代码如下：

import axios from 'axios'
// 先设置为空
const BASE_URL = '' 
axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
// 创建axios实例
const service = axios.create({
  // axios中请求配置有baseURL选项，表示请求URL公共部分
  baseURL:BASE_URL,
  // 超时
  timeout: 20000
})

// 响应拦截器
service.interceptors.response.use(res => {
    // 未设置状态码则默认成功状态
    const code = Number(res.status);
    if (code === 401) {
     console.log("图片服务返回401-json下载失败");
     
    } else if (code === 402) {
     console.log("图片服务返回402- json内容为空");
    }
  },
  error => {
    console.log('err')
    return Promise.reject(error)
  }
)

export default service

然后在调用服务接口的页面调用axios和request.js
代码如下：

import axios from 'axios'
import request from '@/util/request'

method中:
//调用通知接口
async postTask(){
      let that = this
     // 接口参数
      let data = {
        taskid:this.jobId, // 任务执行历史id
        imageid:this.downId, // 下载链接id
      }
      // **这里是用的第二个代理服务器/watwise_war** 同理第一个代理服务器/gosd
      axios.get('/watwise_war/Dingapp/ImageIn', {
　　    params: data
      }).then(function (response) {
    　　console.log('图片下载1：调用通知接口3-返回值',response);
      }).catch(function (error) {
        console.log('图片下载1：调用通知接口4-报错',error);
      });

    },

三、跨域问题解决后还报404解决

1、修改了vue.config.js或者webpack.config.js文件,务必要重启，不重启代理无法生效
2、浏览器里直接访问目标接口地址（带具体参数） , 测试接口是否能够正常访问，防止是接口问题
3、检查一下devServer属性是不是有多个重复了（超过一个就是重复），之前我项目中就是这个问题导致的报404错误.