vue 代理跨域,vue跨域请求接口代理方式

　　当前端和后端分开进行项目开发时，跨领域问题是不可避免的。下面文章主要介绍vue中前端代理跨域问题的相关信息。通过示例代码非常详细的介绍，有需要的朋友可以参考一下。

目录

　　前言第一、第二和第三代码摘要

前言

　　这几天学习vue进行前后台交互时出现了跨域问题，查了文章文档，总结了自己的实践后终于解决了。本文在遗忘的情况下对此进行了总结，也希望对正在经历这个问题的同学有所帮助。注意：这里解释的是VUE 2 . x版本的方法！

第一

　　首先需要确定我们使用的接口名称，我自己的Java后端的接口和python后端的接口。

　　http://localhost:8081/articles/find article page

　　http://127 . 0 . 0 . 1:5000//API/try chat

　　你可以看到我这里用的是两个不同的端口，所以基本可以满足大部分人的需求。

　　在main.js文件中定义全局变量axios。

　　Vue.prototype.$axios=axios

第二

　　我们通过需要调用的接口重写config文件夹中的index.js文件。

　　以我的为例，先找到proxyTable，在这里我们需要修改需要配置的跨域代理。

　　以我需要配置代理的接口为例。你可以照着我的例子来改变它。

　　重写请求地址。如果你像我一样给它起名字，不管你设不设成null都差不多。

　　你可以看到我是按照接口的地址写的这个配置的名字，所以不容易出错。否则血淋淋的教训还是不成功。

　　至于dev.env.js文件和prod.env.js文件的配置，我尝试了不重启vue项目跨域。为什么没有深入研究？如果你知道什么，可以给点建议。

　　开发环境js

　　产品环境

第三

　　接下来，您可以向后端发出请求。这是我写的例子。

　　这里只是对跨域写作和经验的总结，其他的就不展示了。这套操作基本上解决了大部分人的需求，我也尝试了很多次来实现。我觉得大部分网上教程都很死板，所以我总结一下经验和方法。我觉得还是取接口对应的名字比较好。更容易成功。

代码

　　当然我准备了代码让大家直接cv，方便快捷。

　　/articles :

　　//websocket

　　ws:假的，

　　//目标地址

　　目标： http://localhost:8081/，

　　//发送请求标头主机将被设置为目标

　　changeOrigin:真的，

　　//重写请求地址

　　路径重写：{

　　^/articles: /文章

　　}

　　},

　　//prod.env.js

　　模块.导出={

　　NODE_ENV:“生产”，

　　api: //127.0.0.1:5000/ ，

　　文章： //localhost:8081/ ，

　　}

　　//dev.env.js

　　module.exports=merge(prodEnv，{

　　NODE_ENV:“开发”，

　　api: /api/ ，

　　文章： /articles/

　　})

　　好了，就这些。如果你还有其他问题或者还有不明白的地方，可以问我。我会尽力回答，前提是我理解。

总结

　　关于vue中前端代理跨域问题的这篇文章到此为止。关于vue中前端代理跨域问题的更多信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。