vue跨域问题解决：Access to XMLHttpRequest at‘httplocalhost

在vue项目根目录下找到vue.config.js文件

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
//WebSocketClient.js?5586:16 WebSocket connection to //‘ws://10.51.171.219:8080/(解决)
  devServer: {
    host: '0.0.0.0',
    port: 8080,
    client: {
      webSocketURL: 'ws://0.0.0.0:8080/ws',
    },
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
    //解决跨域问题
    proxy: {
      '/api': {//表示拦截以/api开头的请求路径
        target: 'http://（这里填你项目真实的后端地址）',
        changOrigin: true,//是否开启跨域
        pathRewrite: {
          '^/api': '' //重写api，把api变成空字符，因为我们真正请求的路径是没有api的
        }
      }
    }

  },
  transpileDependencies: true,
  lintOnSave: false
})

在axios.create的时候将baseURL设置为api

const instance = axios.create({
    baseURL: 'api',
    timeout: 5000,
})

原文作者