vue-cli项目本地代理实现跨域请求

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_40126227/article/details/78287807
使用 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);
})






展开阅读全文
博主设置当前文章不允许评论。

没有更多推荐了,返回首页