使用 Vue-cli 创建的项目，开发地址是 localhost:8080，需要访问非本机上的接口http://10.1.0.34:8000/queryRole。不同域名之间的访问，需要跨域才能正确请求。跨域的方法很多，通常都需要后台配置，不过 Vue-cli 创建的项目，可以直接利用 Node.js 代理服务器，通过修改 vue proxyTable 接口实现跨域请求

在vue-cli项目中的config文件夹下的index.js配置文件中，修改前的dev： 

dev: {
    env: require('./dev.env'),
    port: 8080,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {},
    // CSS Sourcemaps off by default because relative paths are "buggy"
    // with this option, according to the CSS-Loader README
    // (https://github.com/webpack/css-loader#sourcemaps)
    // In our experience, they generally work as expected,
    // just be aware of this issue when enabling this option.
    cssSourceMap: false
  }

只要修改里面的proxyTable: {}项 

proxyTable: {
      '/api': {  //代理地址
          target: 'http://10.1.0.34:8000/',  //需要代理的地址
          changeOrigin: true,  //是否跨域
          secure: false,  
          pathRewrite: {
              '^/api': ''   //本身的接口地址没有 '/api' 这种通用前缀，所以要rewrite，如果本身有则去掉
          },
      }
}








 

 

 
  
 
 

 

 
 然后重启项目npm run dev 

 

 
 
 

 

 
  

 

 
 
  

 

 
 请求数据时URL前加上“/api”就可以跨域请求了 

 

 
 
  

 

 
 
self.$axios.get('/api/queryRole', {params: params})
.then((res) => {
console.log(res);
}).catch((err) => {
console.log(err);
})
 
  
 
 

 

 
 
  

 

 
 
  

 

 
  
 
 

 

 
  
 
 

 

 
  
 
 

 
  

        # node.js
      
  
 
 Logo 
Vue
 
前往低代码交流专区
 
 
  
更多推荐
  
 
vue 表单验证
 
1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^
 
avatar Vue
 
cover
 
echarts堆叠柱状图
 
 
avatar Vue
 
 
Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"
 
这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...
 
avatar Vue