美文网首页vue
vue开发过程中跨域最简单解决方案

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

作者: 诺奕 | 来源:发表于2017-05-29 13:20 被阅读4211次
前言:我们在进行一个项目开发工程中,需要从后端工程师那里获取数据库中的数据。然而前端代码和后端代码在未打包前是分离的,这就引入了一个“跨域取数据”的问题。
下面,我们就简单说下,利用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,很强大的插件。

相关文章

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

    前言:我们在进行一个项目开发工程中,需要从后端工程师那里获取数据库中的数据。然而前端代码和后端代码在未打包前是分离...

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

    https://juejin.im/post/5d52a4fe518825163b090495 前言:我们在进行一...

  • chrome关闭跨域

    跨域 在开发过程中,碰到跨域是在所难免的,但是后端可能又懒得设置cors,或者不知道怎么设置。常用跨域解决方案就不...

  • 开发环境跨域和生产环境跨域

    开发环境跨域 前后端分离,IP地址不同,请求数据必然导致跨域问题;解决方案:proxy设置 生产环境跨域 解决方案...

  • 解决Vue http中的跨域问题

    在平常的项目开发当中,很容易遇到跨域的问题,好在vue-cli的脚手架提供了跨域的解决方案,在config下的in...

  • vue使用过程中的一些问题解决

    1.接口跨域问题 本地开发项目请求服务器接口的时候,因为客户端的同源策略,导致了跨域的问题,解决方案如下vue.c...

  • 使用node转发请求

    前言 本篇文章基于 vue、node(koa) 需求 vue 项目开发过程中,接口跨域是一个很常见的问题。在开发时...

  • IOS webview iframe 引入第三方页面白屏

    跨域引入或者跨域请求是前端小伙伴在开发中经常遇到的问题,,在网上搜索你会发现很多解决方案:无论是前端Vue项目的加...

  • 前后端分离项目主流的跨域解决方案

    三种主流的跨域解决方案(vue-cli3 package.json中配置跨域)[https://blog.csdn...

  • Vue跨域请求

    在使用vue开发的时候经常要涉及到跨域的问题,其实在vue cli中是有我们设置跨域请求的文件的。 1、当跨域无法...

网友评论

    本文标题:vue开发过程中跨域最简单解决方案

    本文链接:https://www.haomeiwen.com/subject/gwbkfxtx.html