vue-cli本地环境API代理proxyTable

前言


我们在使用vue-cli启动项目的时候npm run dev便可以启动我们的项目了,通常我们的请求地址是以localhost:8080来请求接口数据的,localhost是没有办法设置cookie的。

我们可以在vue-cli配置文件里面设置一个代理,跨域的方法有很多,通常需要后台来进行配置。我们可以直接通过node.js代理服务器来实现跨域请求。

vue proxyTable接口跨域请求调试


在vue-cli项目中的config文件夹下的index.js配置文件中,dev长这样子:


服务器提供的接口如果长这样https://www.exaple.com/server_new/login,我们把域名提取出来如https://www.exaple.com;

在config中新建一个文件命名为proxyConfig.js :


config文件夹下的index.js引入proxyConfig.js:


重启项目npm run dev:

你会发现出现了这个


这个时候我们已经设置好了本地API代理了

修改本地hosts文件

文件路径一般是C:\Window\System32\drivers\etc,打开hosts文件,在这一段下面把localhost设置进去


此时我们已经完全解决了跨域问题,以及本地测试后台无法向我们本地环境设置cookie的情况了。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,268评论 19 139
  • 相关概念 混合开发和前后端分离 混合开发(服务器端渲染) 前后端分离后端提供接口,前端开发界面效果(专注于用户的交...
    他爱在黑暗中漫游阅读 2,907评论 4 45
  • 本文作者 Jinkey(微信公众号 jinkey-love,官网 https://jinkey.ai)原文链接 h...
    JinkeyAI阅读 425,794评论 152 921
  • ## 框架和库的区别?> 框架(framework):一套完整的软件设计架构和**解决方案**。> > 库(lib...
    Rui_bdad阅读 3,036评论 1 4
  • 荒芜茎阅读 195评论 2 2