VUE中使用代理解决跨域问题

原创 已于 2023-11-14 20:20:52 修改 · 3.1k 阅读 · 2 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
收录于
Vue

当前文章被收录于：

Vue
3 篇文章 0 人学习

和vue相关的知识

订阅专栏 查看详情
于 2019-11-29 15:49:29 首次发布
本文介绍了一种在Vue项目中解决跨域问题的有效方法。通过在项目配置文件中添加代理，实现了本地开发环境下对跨域资源的成功访问。文章提供了详细的步骤和前后对比，帮助开发者快速定位并解决跨域难题。

开发板推荐：天空星STM32F407VET6开发板

超高性价比 STM32主控 | 超高主频 | 一板兼容百芯 | 比赛神器 | 沉金彩色丝印

点击查看

本来我不想写这篇文章，但我发现要写，必须要写，因为网上的一些文章看起来过于难过，，

所以我准备整理一个让人第一眼看上去就有兴趣往下看的简洁明了的博文，

说明：

我在写vue的时候，遇到过跨域问题，当时后台还没解决，所以我们自己在前端暂时使用了这种方式

正文：

下面是一个demo案例。

下面图片的访问链接是http://192.168.1.116:8080/demo/vuetest?name=get_param_vue (192.168.1.116是我本机localhost)

可以看出来因为跨域访问失败了！

解决方法：

在工具中打开项目一级目录config然后找到index.js在proxyTable对象中加入代理代码，注释已经写了就不解释了

添加完之后npm run dev重新启动工程

添加代理后的访问链接：http://192.168.1.116:1026/agent_url/vuetest?name=get_param_vue

再次访问后台，已经接收到了请求并打印了参数

开发板推荐：天空星STM32F407VET6开发板

超高性价比 STM32主控 | 超高主频 | 一板兼容百芯 | 比赛神器 | 沉金彩色丝印

点击查看
标签
#vue 跨域 #vue 代理解决跨域
VUE跨域、常用解决跨域的方法
codingLeader的博客
01-27 9万+
VUE跨域、常用解决跨域的方法
【Vue学习笔记】跨域的六种解决方案
biancheng_的博客
03-30 1万+
跨域问题的解决方法 JSONP Nginx反向代理 CORS解决跨域问题 postMessage解决跨域问题 WebSocket解决跨域问题 devServer代理跨域
Vue如何处理浏览器跨域问题
最新发布
sungencheng的博客
02-09 5782
跨域问题是由于浏览器的同源策略（Same-Origin Policy）所导致的，同源策略是浏览器的一种安全机制，也就是浏览器向不同源（不用协议、不用域名、不同端口）发送ajax请求会失败。
vue：跨域
sssxlxwbwz的博客
07-10 4588
vue 跨域
【VUE】跨域问题的概念，以及解决方法。
qq_62555748的博客
09-08 3864
跨域问题的概念，以及解决方法。
【vue】 配置代理、解决跨域问题
liangjiayy的博客
10-11 2万+
尚硅谷视频：https://www.bilibili.com/video/BV1Zy4y1K7SH?p=95axios官网教程：https://axios-http.com/docs/introvue配置代理：https://cli.vuejs.org/zh/config/#devserver-proxy安装axios发送ajax请求： 使用：(官网：https://axios-http.com/docs/example)也就是： 官网：https://cli.vuejs.org/zh/config/#de
vue项目配置代理解决跨域问题
qq_51066068的博客
08-03 5597
什么是跨域？ JavaScript同源策略：当协议、子域名、主域名、端口号中任意一个不相同时，都算作不同域。不同域之间相互请求资源，就算作“跨域”。同源策略要求源相同才能正常进行通信，即协议、域名、端口号都完全一致。**同源策略限制：**表单提交、AJAX请求等。 注意：跨域并不是请求发不出去，请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了。......
vue设置代理解决跨域问题
低调哥的博客
04-25 4035
vue设置代理解决跨域问题 贴代码 config/index.js 'use strict' // Template version: 1.3.1 // see http://vuejs-templates.github.io/webpack for documentation. const path = require('path') var proxyConfig = req...
vue项目配置本地代理解决跨域问题
qq_45846691的博客
06-18 3078
vue项目配置本地代理解决跨域问题 原理：之所以出现跨域是因为浏览器为安全起见采取的同源策略的限制，即域名，协议，端口相同，所以我们在本地开发环境请求后台接口时浏览器会出现跨域的错误，配置本地代理是利用了服务器是不存在同源策略的限制这个原理来解决跨域问题的。当客户端发送请求时，请求本域服务器，再由本域服务器请求数据并响应返回给客户端。 vue-cli 2.x搭建的项目 在config 文件夹的index.js文件中找到开发环境dev里面的proxyTable 然后进行如下配置： module.expor
vue 配置代理 解决跨域问题
热门推荐
一个热爱学习的前后攻城狮
03-22 3万+
vue-cli项目 配置代理 解决跨域问题 问题描述 因为是自己写前端也要自己写接口,我使用的nodejs+express开的服务写接口 但是vue 项目 运行调试时会占用一个端口 而node开启服务也许要监听一个端口 两者虽然都是在一个ip地址,但是端口不同也就造成了跨域问题的出现 虽然可以在后端方面(node)通过安装cors包 解决,但是cors是指定对应的ip和域...
vue中的proxy代理的使用（解决跨域问题）
tttttrrrhh的博客
11-04 1万+
总结一下前端中 proxy代理配置过程，如何解决跨域问题的。
Vue使用代理方式解决跨域问题
pan_junbiao的博客
09-20 2142
如果 Vue 前端应用请求后端 API 服务器，出现跨域问题（CORS），这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。通过使用代理方式解决跨域问题。vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。
vue配置代理解决跨域请求问题
qq_42077324的博客
04-12 1万+
vue配置代理解决跨域请求问题
解决跨域问题！Nginx代理与Vue-cli代理处理跨域问题
黄政的博客
04-18 3402
解决跨域问题！Nginx代理与Vue-cli代理处理跨域问题前言业务场景两种跨域解决方法解决原理Ngnix代理vue-cli写在最后 前言 我是一个java后端程序员，之前解决跨域都是在后端写一个过滤器，给HttpRequest的header添加都头信息。但是入职公司后线上服务器是通过配置nginx代理来解决跨域的，所以我再写个过滤器是多余。 现在都是前后端分离，为了更好的接口测试，让前端项目在我...
搞懂：前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理
weixin_36968382的博客
01-31 1115
什么是跨域 跨域：一个域下的文档或脚本试图去请求另一个域下的资源 广义的跨域包含一下内容： 1.资源跳转(链接跳转，重定向跳转，表单提交) 2.资源请求(内部的引用，脚本script，图片img，frame) 3.script内部发起的请求(ajax，dom请求，和js跨域调用 跨域问题出现： 只有浏览器端出现，直接用终端请求，是不会出现跨域拦截，是属于浏览器端的安全策略，浏览器将不同...
vue配置反向代理解决跨域问题
KongYue1202的博客
08-23 966
配置反向代理解决跨域问题 反向代理用来解决前端跨域问题，设置很简单，在 vue-cli 项目的 config 文件夹 index.js 文件下进行如下设置即可： module.exports = { devServer: { proxy: { '/ajax': { target: 'https://m.maoyan.com', // 跨域地址 // ws: true, changeOrigin: true // 是否跨域 }
Vue如何通过代理解决跨域问题
dongzhensong的博客
03-25 3944
**背景：**后端API是用java开发的，前端使用Vue+ele开发的。由于启动Vue的时候会占用一个端口，而后端项目启动后也需要占用一个端口且与前端不同，因此在页面中访问前端的时候就会出现跨域的问题，解决方法比较简单： 修改config下的index.js文件： module.exports = { dev: { proxyTable: { '/api': { ...
vue使用代理解决请求跨域问题
一只前端小菜鸟
03-15 5008
在日常开发中，我们前端必不可少的需要像后端请求数据。 但是一般前后端分离，所以域名、端口等肯定不尽相同，这样就不可避免的会遇到浏览器的同源策略限制。 在一般情况下，后端都会设置请求跨域允许的来源、方法等。 但是也保不准后端疏忽而忘记这个问题。 那为了不影响我们的开发，前端只能被动的去找后端解决跨域问题。 其实，我们前端也可以解决跨域问题，那就是使用代理。 举个例子： 我请求的地址是这...
Vue2：通过代理服务器解决跨域问题
Brave_heart4pzj的博客
01-26 2384
Vue
Vue中代理解决跨域问题
api_git355的博客
09-12 675
在前端开发中，跨域是一个常见的问题，特别是在使用Vue框架进行开发时。跨域是指在浏览器中发送的AJAX请求的目标地址与当前页面的地址不在同一个域下，这会导致浏览器的同源策略产生限制，从而阻止了跨域请求的发送。现在，当我们在Vue应用中发送请求时，只需将请求路径设置为以’/api’开头的路径，代理服务器将会将请求转发到目标服务器上，并将响应返回给Vue应用。pathRewrite用于重写路径，这里的’^/api’表示将请求路径中的’/api’替换为空字符串，以便请求能够正确地转发到目标服务器。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值