[JavaScript知识库]vue跨域问题解决

在vue项目中，与package.json同级创建vue.config.js的入口文件 名字必须是vue.config.js 这是vue-cli在webpack搭建时留的文件入口
vue.config.js配置如下

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/' : '/',
  assetsDir: 'static',
  productionSourceMap: false,
  devServer: {
    port: 10003,
    https: false,
    // 自动启动浏览器
    open: true,
    proxy: {
      // /api 自定义服务代理名字
      "/api" : {
        target : process.env.VUE_APP_PDM_API, //代理帮助你请求的具体服务
        changeOrign : true, // 开启代理
        pathRewrite : {  // 格式化path
          "^/api" : ""
        }
      }
    }
  },
  configureWebpack: {
    devtool: 'source-map'
  },
  // 关闭eslint
  lintOnSave: false
}

NODE_ENV = 'development'
VUE_APP_BASE_API = 'http://localhost:8080/'
VUE_APP_PDM_API = 'http://localhost:9527'

请求设置：把请求地址中的服务http://localhost:9527改为/api (在代理服务配置中自己定义的服务代理名)

     return axios({
            method: 'get',
            url,
            baseURL: '/api',
            params // get 请求时带的参数
        })

《新程序员》：云原生和全面数字化实践

50位技术专家共同创作，文字、视频、音频交互阅读