vue跨域问题解决方法（以验证码的实现为例，包括vue.config.js不生效的解决方法）

最新推荐文章于 2023-05-16 19:58:09 发布
最新推荐文章于 2023-05-16 19:58:09 发布
阅读量1.1k 收藏 1
点赞数 3
分类专栏： 笔记 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Andre_dong/article/details/118638080
版权

问题

在这里插入图片描述
如图所示，前端页面做了一个验证码，但是打开来看，其访问地址和host的地址一样，并不能到达后端接口处

在这里插入图片描述
项目大致结构如上所示，vue.config.js配置完后，本来以为跨域问题就解决了，谁知这个文件根本不生效。

解决方法

在这里插入图片描述
在这里插入图片描述
在config目录下的index.js里面配置跨域配置，就可以生效了

Andre_dong
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 多个api跨域解决vue.config.js
PrimaryColor
08-31 1048
// vue的配置文件 module.exports = { devServer: { proxy: { '/zz': { ws: true, target: 'http://api.map.baidu.com/telematics/v3', changeOrigin: true, pathRewrite: {
vue2.x跨域处理（vue.config.js不起作用）
Q_Q104926的博客
03-09 2999
vue2.x跨域处理（proxy请求转发） 问题 刚刚入门vue，想实现vue页面请求后端验证码图片和登录功能。作为小白的我需要不断的摸索前进。 后端提供，前端发送请求，似乎很简单的一个请求就可以解决，我刚开始也是这么想滴，但是，写完发现有草率了。我前端的端口是8088，服务端的端口是2020，F12查看，发现获取验证码的请求怎么都发送在前端，故而页面显示空白。 度娘发现需要在前端做一个代理转发，那就按照度娘的结果一步步来吧。 这里已经安装axios。 ① 建立一个vue.config.js 文件，
vue项目跨域问题（图片跨域）devServer.proxy代理失效时，nginx反向代理解决跨域问题
qq_44760347的博客
03-09 3741
vue项目跨域问题（图片跨域）devServer.proxy代理失效时，nginx反向代理解决跨域问题
proxy代理不生效、vue config.js不生效解决方法
weixin_47379721的博客
01-06 8122
vue config.js 配置跨域不生效已解决、proxy代理不生效已解决、axios配置跨域不生效已解决、springboot跨域设置已解决
vue.config.js配置跨域不生效
qq_43409827的博客
05-16 430
修改完vue.config.js文件记得重启项目才会生效。
Jwt
xiaoyi215的博客
10-11 141
Jwt 1. JWT是什么 JSON Web Token (JWT)，它是目前最流行的跨域身份验证解决方案 2. 为什么使用JWT JWT的精髓在于：“去中心化”，数据是保存在客户端的。 3. JWT的工作原理: 1. 是在服务器身份验证之后，将生成一个JSON对象并将其发送回用户，示例如下： {"UserName": "Chongchong","Role": "Admin","Ex...
vue 本地跨域
dyx001007的博客
03-28 1998
在vue开发中实现跨域：在vue项目根目录下找到vue.config.js文件（如果没有该文件则自己创建），在proxy中设置跨域 module.exports = { devServer:{ proxy: { //配置跨域 '/dev-api': { //目标接口域名 ,dev-api 自定义标识,用来识别带dev-api的请求 target: '地址',// 实际需要访问的接口域名 changeOrigin:true,// 如果接口跨域，需.
vue - vue.config.js中devServer配置方式
10-16
总结来说，`vue.config.js` 中的 `devServer` 配置是开发环境的关键设置，通过代理配置可以方便地处理跨域问题，同时结合axios的 `baseUrl` 配置，使得前后端分离的项目在开发阶段能够顺畅地进行数据交互。...
解决Vue请求接口出现跨域问题.docx
05-06
在本例中，我们将探讨如何解决Vue.js应用在请求接口时遇到的跨域问题。 首先，了解跨域的含义至关重要。跨域是指由于浏览器的同源策略，JavaScript只能向与当前页面同源（即协议、域名和端口完全相同）的服务器发送...
Vue跨域请求问题解决方案过程解析
11-19
总结来说，解决Vue跨域问题的关键在于利用Vue CLI的开发服务器代理功能，通过`vue.config.js`配置代理规则，使得前端请求可以绕过浏览器的同源策略，顺利与远程API进行通信。同时，我们还可以通过设置axios的baseURL...
Vue项目History模式404问题解决方法
12-01
- **Vue配置调整**：在`webpack.config.js`中，可以设置`publicPath`为绝对路径，例如`/`，确保所有资源文件的引用为绝对路径，这样Nginx更容易处理。 ```javascript const publicPath = '/' module.exports = {...
vue 本地环境跨域请求proxyTable的方法
11-30
为了在本地开发环境中解决这个问题，Vue CLI 提供了一个名为 `proxyTable` 的配置选项，它允许我们设置代理来转发HTTP请求到其他服务器，从而绕过浏览器的跨域限制。本文将详细介绍如何在Vue项目的`config/index.js`...
spring-boot和vue跨域、阿里云验证码使用
weixin_45843676的博客
03-08 430
spring-boot和vue跨域、阿里云验证码使用
react和vue配置proxy跨域请求并且查看测试proxy是否生效
oops
06-09 3816
前端查看测试proxy代理是否生效
vue 项目 跨域问题
weixin_42571699的博客
11-20 199
方法一：后台配合添加允许跨域 方法二: 谷歌浏览器全局配置 右键->快捷键方式->目标尾部添加 --disable-web-security --user-data-dir=C:\MyChromeDevUserData 方法三：使用代理(只本地有用，上传到服务器需要后端解决跨域问题) 根目录新建vue.config.js //多域名跨域配置 module.exports = ...
SpringBoot+Vue3实现登录验证码功能
心态的博客
04-27 4431
登录页面都会有输入用户名、密码和验证码而判断用户是否登录成功做出响应的操作。输入用户名和密码提交表单做登录验证这个相信看到这篇文章的小伙伴们都是小问题（熟练地不能在熟练了）。但这个验证码用户点击刷新验证码，用户填写后才能正常登录。随机生成图片验证码就会有些疑惑，不知道该怎么做。 这篇文章我们就来重点看如何生成验证码，前端如何展示，如何点击验证码后会换张图片（就是常见到的“看不清？换一张图”）这一功能。
vue 2.x 版本 vue.config.js 配置跨域踩坑！！！
qq_36953218的博客
09-15 578
之前的 vue.config.js 配置失效，需要换个地方配置
解决国外链接下载软件速度慢的方法
Andre_dong的博客
12-22 6759
无论是下载vagrant，还是vscode，还是centos7，只要你进了官网，点击下载，打开浏览器的下载管理器，你就会看到这个东西（这里以vscode为例） 右键它，选择复制下载地址（我右键的时候不能截图，所以截不到右键的图） 打开迅雷，复制链接进去，你会发现，下载速度快到飞起 ...
vue+element-ui运行后图标不显示（只显示成小方框的错误）
Andre_dong的博客
06-02 2088
看了一下网上大部分的做法，却没有一种能够解决我的问题 在苦苦钻研了几个小时后，问题终于解决了，解决方法如下： 在config文件里面的index.js文件当中，找到这个代码块，添加箭头所指的代码，注意加上那个小点。 问题解决 ...
vue.config.js proxy不生效
最新发布
09-05
- *2* *3* [proxy代理不生效、vue config.js不生效解决方法](https://blog.csdn.net/weixin_47379721/article/details/128576797)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值