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

已于 2023-11-14 20:20:52 修改
阅读量3k 收藏 2
点赞数
分类专栏： Vue 文章标签： vue 跨域 vue 代理解决跨域
于 2019-11-29 15:49:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cm777/article/details/103311650
版权

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

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

说明：

我在写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

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

辛丑年正月十五
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue使用代理解决请求跨域问题详解
01-19
其实，我们前端也可以解决跨域问题，那就是使用代理。 举个例子： 我请求的地址是这个：http://192.168.12.36:9000/api/SourceManager 但是我本地的vue项目的端口号是8080，这里就涉及到了端口号不一致导致的同源...
Vue前端配置代理解决跨域问题
cddAngel的博客
06-24 1685
前端配置代理解决跨域问题
vue中的proxy代理的使用（解决跨域问题）
热门推荐
tttttrrrhh的博客
11-04 1万+
总结一下前端中 proxy代理配置过程，如何解决跨域问题的。
2024年前端最全【vue】 配置代理、解决跨域问题_vue 代理(3)，2024年最新面试Web前端系统架构
最新发布
2401_84413092的博客
05-12 579
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】如图，通过axios请求服务器上的资源：简单写了一个spring boot项目用于处理该请求：（你只需知道这个请求会被服务器处理）出现跨域问题：（从8080端口请求5000端口，端口不一致）
Vue中利用代理服务器解决跨域问题
qq_45796592的博客
01-06 2823
vue脚手架利用代理服务器解决跨域
vue如何解决跨域？原理？
cccbbbmmm的博客
08-25 175
需要新建vue.config.js 【默认情况下，3以上的版本可以直接识别这个js文件，把它当做自己的配置文件】原理：先请求本地服务器，本地服务器再去请求真正的后台服务器，最后本地服务器再将请求回来的数据返回给浏览器。原理：动态生成script标签，通过src引入接口地址(因为src不存在跨域的)原理：它允许浏览器向跨源服务器，发出XMLHttpRequest请求。1、在项目框架的根目录下新建文件：vue.config.js。2、重启项目，这样的话新建的文件就可以被识别了,一定要重启。
vue项目前端解决跨域问题
baidu_40120883的博客
05-05 7007
在前后端分离项目中，跨域是一定会出现的问题，本文主要介绍跨域问题的解决思路，以及在vue项目中如何使用代理的方式在前端解决跨域问题，同时提供一个后段解决的方案。
Vue项目中跨域问题解决方案
01-19
使用http-proxy-middleware 代理解决（项目使用vue-cli脚手架搭建） Jquery jsonp 后台更改header header('Access-Control-Allow-Origin:*');//允许所有来源访问 header('Access-Control-Allow-Method:POST,GET')...
详解Vue-cli代理解决跨域问题
01-19
使用vue-cli调接口的时候，总是会出现垮与问题，因为vue的localhost与访问域名不一致导致。而这一点，开发者显然也想到了，故而在vuejs-templates，也就是vue-cli的使用的模板插件里，有关于API proxy的说明，这个...
vue打包使用Nginx代理解决跨域问题
12-09
使用nginx配置反向代理，这样就可以在前端彻底解决跨域问题。 vue index.js文件源码 'use strict' // Template version: 1.2.7 // see http://vuejs-templates.github.io/webpack for documentation. const path...
Vue中利用proxy代理解决跨域问题
aybaiwan的博客
07-25 2005
根据同源策略，浏览器只允许网页从同源网页加载资源，而不允许从不同源的网页获取或操作数据。'/dev': { // /dev表示拦截以/dev开头的请求路径。'^/dev': '' // 把/dev变为空字符。target: define.APIURl, // 跨域的域名。request.js （名字可以随意取） 文件中封装请求 ，并暴露出去（也是为了方便）
Vue跨域解决方法
weixin_51412569的博客
09-05 9207
vue跨域
Vue中的跨域解决方案
小陈的博客
06-29 1万+
现阶段跨域方式有很多种，但是基本思想只有两种：绕过同源策略：历史遗留的产物，虽然思想很好，但是局限性太大（仅支持、因为数据是在中，所以携带数据小）。 ：通过反向代理绕过去，这是很完美的解决方案，加上会给服务器增加一点压力，不过这点压力问题并不大[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ddoEgRFd-1656482203293)(https://juejin.cn/)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4M4avsX0-1
Vue中设置代理解决跨域问题
qq_58511059的博客
01-07 644
Vue中设置代理解决跨域问题。
Vue配置代理(devServer)，解决跨域问题
学习，是熵减的最有效途径。
06-09 1万+
如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 `vue.config.js` 中的 `devServer.proxy` 选项来配置。
vue前端配置代理解决跨域
qq_46030883的博客
08-02 452
代码】vue前端配置代理解决跨域。
vue解决跨域的几种办法
2301_76965813的博客
05-11 9116
Access-Control-Allow-Credentials： 可选，值为布尔值，表示是否允许发送Cookie。三、CORS是跨域资源共享（Cross-Origin Resource Sharing），以 ajax 跨域请求资源，支持现代浏览器，IE支持10以上。Jsonp(JSON with Padding) 是 json 的一种”使用模式”，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。明确许可，Cookie可以包含在请求中，一起发给服务器。，表示接受任意域名的请求，
Vue3 前端配置代理解决跨域
白瑕 的博客
05-06 6564
一个亲测可用的跨域解决方案.
vue 使用proxy 实现跨域
m0_69210482的博客
07-27 181
跨域是指在 Web 应用中，一个网站或应用访问另一个网站或应用所在的域之外的资源。由于浏览器的同源策略，一般情况下同一个域中的网站或应用可以互相访问资源，但跨域访问会被浏览器拒绝。跨域的产生原因包括：不同的域名：同一个网站或应用如果使用不同的域名，则会产生跨域。不同的协议：如果两个网站或应用使用的协议不同（如 HTTP 和 HTTPS），也会产生跨域。不同的端口：同一个域名，如果使用不同的端口号，也会产生跨域。
vue打包使用nginx代理解决跨域问题
05-01
在前端开发中，经常遇到跨域问题，特别是在使用vue进行打包后部署到生产环境时，很容易出现跨域问题。而要解决这个问题，可以使用nginx代理来解决。 首先，我们需要安装nginx，安装完成后，可以进入nginx的配置文件，一般路径为/etc/nginx/nginx.conf，然后在http模块中加入如下配置： ``` http { server { listen 80; server_name your.api.com; //这里填写你的API地址 location / { proxy_pass http://www.your.api.com; //这里填写你的API地址 add_header Access-Control-Allow-Origin *; //允许跨域请求 } } } ``` 修改完配置文件后，可以使用nginx命令重启nginx生效。配置完成后，我们就可以使用vue-cli中的axios进行跨域请求，在请求头部分加上 ``` proxy: '/yourapi' //这里填写你的请求API地址 ``` 即可完成请求代理。这样，通过nginx代理，我们就可以解决vue打包后的跨域问题了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值