vue开发过程中跨域最简单解决方案

前言：我们在进行一个项目开发工程中，需要从后端工程师那里获取数据库中的数据。然而前端代码和后端代码在未打包前是分离的，这就引入了一个“跨域取数据”的问题。

下面，我们就简单说下，利用vue脚手架生成的项目，在开发过程中怎么解决此问题。

第一步

找到并打开config文件夹下的index.js,做如下配置proxyTable：

proxyTable: {
  '/api': {
    target: 'http://api.xxxxxxxx.com',
    changeOrigin: true,
    pathRewrite: {
      '^/api': '/api'
    }
  }
}
//说明配置中的target后面内容为后端人员提供的数据接口。
//原理就是类似vpn做了一个中转，Node替你去接口请求数据而已

第二步

//调用
this.$http.get('/api/login').then(function(data){
   console.log(data)
})

如果不是用Vue脚手架生成的项目怎么办呢？

引入插件http-proxy-middleware
github：https://github.com/chimurai/http-proxy-middleware
深入了解的话可以看该插件配置说明，似乎还支持websocket，很强大的插件。

版权声明：本文来源简书，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://www.jianshu.com/p/16f05ae4ca0f
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2020-01-08 22:06:29
阅读 ( 1304 )
分类：前端

vue开发过程中跨域最简单解决方案

前言：我们在进行一个项目开发工程中，需要从后端工程师那里获取数据库中的数据。然而前端代码和后端代码在未打包前是分离的，这就引入了一个“跨域取数据”的问题。

下面，我们就简单说下，利用vue脚手架生成的项目，在开发过程中怎么解决此问题。

第一步

第二步

如果不是用Vue脚手架生成的项目怎么办呢？

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看