vue中前端代理跨域问题实例总结

目录
  • 前言
  • 第一
  • 第二
  • 第三
  • 代码
  • 总结

前言

这几天在学习vue进行前后端交互时出现了跨域问题，也是经历查文章查文档和自己实践总结才最终解决。这篇文章就对此进行总结，以防忘记，同时也希望能对正在经历该问题困扰的同学们有所帮助。注意：这里讲解的是vue2.x版本的方法！

第一

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

http://localhost:8081/articles/findArticlePage
http://127.0.0.1:5000//api/tryChat

可以看到我这里使用了两个不同的端口，所有可以说基本可以满足大多数人的需求了。

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

Vue.prototype.$axios = axios

第二

我们通过我们所需调用的接口去改写config文件夹中的index.js文件

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

以我需要的接口为例进行配置代理，大家可以仿照我的例子来改。

重写请求地址那里大家如果是和我一样进行命名的话设不设置为空都差不多。

可以看到我是根据接口的地址来写这个配置的名称的，这样不容易出错，血的教训不然弄半天都还是不成功。

至于在dev.env.js文件和prod.env.js文件的配置如下，我试了不配重启vue项目也没问题依旧可以实现跨域。具体为啥没有深入研究，各位大大佬有知道的也可以指点一二。

dev.env.js

prod.env.js

第三

接下来就可以去对后端进行请求了，这是我写的例子。

这里只是总结跨域的书写与经验，其他就不过多展示了。这样一套操作下来基本就解决了大多数人的需求了，我也是试了很多次才实现的，我看网上大多的教程都很死板的，遂自我总结一下我的经验和方法。我自己觉得最好是取得名字和接口中的有所对应比较容易成功。

代码

当然啦，我还是准备了一下代码让大家可以直接cv ，方便快捷

'/articles': {
                // websocket
                ws: false,
                // 目标地址
                target: 'http://localhost:8081/',
                //发送请求头host会被设置target
                changeOrigin: true,
                // 重写请求地址
                pathReWrite: {
                  '^/articles': '/articles'
                }
              },

              // prod.env.js
module.exports = {
  NODE_ENV: '"production"',
  api: '"//127.0.0.1:5000/"',
  articles:'"//localhost:8081/"',
  }

			// dev.env.js
module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  api: '"/api/"',
  articles: '"/articles/"'
})

好了，总结完毕，大家如果出现其他问题或者还是没看太懂的也可以问我，我一定会尽力解答，当然前提是我懂。

总结

到此这篇关于vue中前端代理跨域问题的文章就介绍到这了,更多相关vue前端代理跨域问题内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue代理和跨域问题的解决

    一.安装vue-resource插件 cnpm install vue-resource --save 在根目录下的package.json检查一下插件的版本 在rourer-index.js下引入文件 import Resource from 'vue-resource' Vue.use(Resource) 引入vue-resource后,可以基于全局的Vue对象使用http,也可以基于某个Vue实例使用http 参考链接 二.安装axios插件 cnpm install --save axi

  • vue使用代理解决请求跨域问题详解

    在日常开发中,我们前端必不可少的需要像后端请求数据. 但是一般前后端分离,所以域名.端口等肯定不尽相同,这样就不可避免的会遇到浏览器的同源策略限制. 在一般情况下,后端都会设置请求跨域允许的来源.方法等. 但是也保不准后端疏忽而忘记这个问题. 那为了不影响我们的开发,前端只能被动的去找后端解决跨域问题. 其实,我们前端也可以解决跨域问题,那就是使用代理. 举个例子: 我请求的地址是这个:http://192.168.12.36:9000/api/SourceManager 但是我本地的vue项目

  • vue中前端代理跨域问题实例总结

    vue中前端代理跨域问题实例总结

    目录 前言 第一 第二 第三 代码 总结 前言 这几天在学习vue进行前后端交互时出现了跨域问题,也是经历查文章查文档和自己实践总结才最终解决.这篇文章就对此进行总结,以防忘记,同时也希望能对正在经历该问题困扰的同学们有所帮助.注意:这里讲解的是vue2.x版本的方法! 第一 首先我们需要先确定我们所使用的接口名,我这里使用的自己Java后端的接口和python后端的接口 http://localhost:8081/articles/findArticlePagehttp://127.0.0.1

  • vue中axios解决跨域问题和拦截器的使用方法

    vue中axios不支持vue.use()方式声明使用. 所以有两种方法可以解决这点: 第一种: 在main.js中引入axios,然后将其设置为vue原型链上的属性,这样在组件中就可以直接 this.axios使用了 import axios from 'axios'; Vue.prototype.axios=axios; components: this.axios({ url:"a.xxx", method:'post', data:{ id:3, name:'jack' } }

  • vue 设置proxyTable参数进行代理跨域

    什么是代理跨域 浏览器之间有同源策略,出于安全考虑不同域之间不允许获取数据,除了几个特殊的例子 <img>.<script>.<audio>等标签可以进行跨域但是通常都是以get的形式,如果用js的axios去远程获取的话进会触发同源政策,除非你服务端的代码设置了header同意让你访问,明显这很不合理呀!.现在不是都流行前后端的分离吗,后端代码跑掉了只剩下前端了,两个次元的代码我前端该怎么获取啊,感觉使用跨域好麻烦好难搞啊还不一定搞得到,这个时候就可以用到代理跨域了

  • 在vue项目中,使用axios跨域处理

    跨域,一个很是让人尴尬的问题,有些人可以在后台中设置请求头,但是很多前端并不具备后台的知识,并无法自己独立的搭建一个服务器,所以就变成了一个尴尬的事情 当然,有很多的虚拟服务器,能够解决跨域问题,他们的实质都是通过后台取与后台沟通,从而委婉的解决跨域问题正好,webpack正有这种功能,所以vue-cli也是有解决跨域的能力 当然,不可能我们直接发送ajax就成功,对吧,我们肯定要修改配置文件 代码: dev: { env: require('./dev.env'), port: 8080, a

  • Vue 项目中遇到的跨域问题及解决方法(后台php)

    Vue 项目中遇到的跨域问题及解决方法(后台php)

    问题描述 前端 vue 框架,后台 php,百度跨域问题后台加这段代码 header("Access-Control-Allow-Origin: *"); 加了之后报这个错: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The valu

  • vue cli+axios踩坑记录+拦截器使用方式,代理跨域proxy

    目录 1.首先axios不支持vue.use()方式声明使用 2.小小的提一下vue cli脚手架 3.axios发送get post请求问题 4.axios拦截器的使用 1.首先axios不支持vue.use()方式声明使用 看了所有近乎相同的axios文档都没有提到这一点 建议方式 在main.js中如下声明使用 import axios from 'axios'; Vue.prototype.$axios=axios; 那么在其他vue组件中就可以this.$axios调用使用 2.小小的

  • vue cli+axios踩坑记录+拦截器使用方式,代理跨域proxy

    目录 1.首先axios不支持vue.use()方式声明使用 2.小小的提一下vue cli脚手架 3.axios发送get post请求问题 4.axios拦截器的使用 1.首先axios不支持vue.use()方式声明使用 看了所有近乎相同的axios文档都没有提到这一点 建议方式 在main.js中如下声明使用 import axios from 'axios'; Vue.prototype.$axios=axios; 那么在其他vue组件中就可以this.$axios调用使用 2.小小的

  • vue项目中常用解决跨域的方法总结(CORS和Proxy)

    目录 一.什么是跨域? 二.如何解决跨域? 总结 一.什么是跨域? 跨域问题的出现是因为浏览器的同源策略问题.所谓同源就是必须有以下三个相同点:协议相同.主机相同.端口相同.如果其中有一项不同,即出现非同源请求,就会产生跨域.当我们请求一个接口的时候,出现如:Access-Control-Allow-Origin 字眼的时候说明请求跨域了 二.如何解决跨域? 跨域的解决方案: jsonpcorsNode中间件代理(两次跨域) 即 Proxynginx反向代理 CORS支持所有类型的HTTP请求,

  • 详解java 中Spring jsonp 跨域请求的实例

    详解java 中Spring jsonp 跨域请求的实例

    详解java 中Spring jsonp 跨域请求的实例 jsonp介绍 JSONP(JSON with Padding)是JSON的一种"使用模式",可用于解决主流浏览器的跨域数据访问的问题.由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的<script> 元素是一个例外.利用 <script> 元素的这个开放策略,网页可以得到从其他来源动态产生的 JSO

  • 实例详解vue中的代理proxy

    目录 问题 复习一下跨域的解决方案 原理 场景 扩展几个常用的devServer配置 扩展几个vue/cli3的配置 问题 我们本地调试一般都是 npm run serve,然后打开 本机ip:8080(localhost:8080)对吧,这时候我们要调接口调试,后端的接口的地址可能在测试环境,也可能是自己电脑的 ip,总之不是你的 lcoalhost:8080,那么你调接口就会产生跨域,那么怎么办呢?就需要proxy出场了 复习一下跨域的解决方案 jsonp cors Node中间件代理(两次

随机推荐