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

最新推荐文章于 2024-07-12 19:13:19 发布
最新推荐文章于 2024-07-12 19:13:19 发布
阅读量1.2k 收藏 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 2.x 版本 vue.config.js 配置跨域踩坑！！！
qq_36953218的博客
09-15 620
之前的 vue.config.js 配置失效，需要换个地方配置
vue2.x跨域处理（vue.config.js不起作用）
Q_Q104926的博客
03-09 3092
vue2.x跨域处理（proxy请求转发） 问题 刚刚入门vue，想实现vue页面请求后端验证码图片和登录功能。作为小白的我需要不断的摸索前进。 后端提供，前端发送请求，似乎很简单的一个请求就可以解决，我刚开始也是这么想滴，但是，写完发现有草率了。我前端的端口是8088，服务端的端口是2020，F12查看，发现获取验证码的请求怎么都发送在前端，故而页面显示空白。 度娘发现需要在前端做一个代理转发，那就按照度娘的结果一步步来吧。 这里已经安装axios。 ① 建立一个vue.config.js 文件，
vue跨域vue.config.js不生效
最新发布
qq_65232359的博客
07-12 183
vue3创建的项目在vite.config.js中修改添加proxy配置。
vue.config.js配置跨域不生效
qq_43409827的博客
05-16 479
修改完vue.config.js文件记得重启项目才会生效。
PHP 简单验证码(支持跨域名调用)
09-18
* 可直接引入图片 * 本站可直接取 $_SESSION['check'] 参数对照验证 跨域名PHP引用验证可带参数,例如 http://www.botu.in/index.php?code=3232 返回JSON参数 1为正确 0为错误 跨域名jQueryAjax引用验证可带参数,例如 http://www.botu.in/index.php?code=3232&jsoncallback=? 返回JSON参数 1为正确 0为错误
vue config.js 配置跨域不生效
热门推荐
mike_95的博客
12-02 1万+
vue config.js 配置跨域不生效 首先，我的config.js文件没有问题 module.exports = { devServer: { open: true, host: 'localhost', port: 8080, https: false, hotOnly: false, proxy: { // 配置跨域 '/api': { target: '',//后端接口地址 ws: tru
VUE+axio登录功能跨域请求验证码失败
qq_42750027的博客
03-23 756
请求验证码方法： code() { axios({ url: baseUrl, responseType:'arraybuffer', codeImg:true, }).then(res => { this.codeImg = 'data:image/png;base64,' + btoa(new Uint8Array(res).reduce((data,...
vue - vue.config.js中devServer配置方式
10-16
总结来说，`vue.config.js` 中的 `devServer` 配置是开发环境的关键设置，通过代理配置可以方便地处理跨域问题，同时结合axios的 `baseUrl` 配置，使得前后端分离的项目在开发阶段能够顺畅地进行数据交互。...
Vue.js 中 axios 跨域访问错误问题及解决方法
10-17
在Vue.js开发中，由于浏览器的同源策略限制，经常会遇到跨域请求的问题。当使用axios库发起HTTP请求时，尤其容易遇到这...总的来说，本文为使用Vue.js和axios开发的开发者提供了一个有效的跨域问题解决思路和操作方法。
解决Vue请求接口出现跨域问题.docx
05-06
在本例中，我们将探讨如何解决Vue.js应用在请求接口时遇到的跨域问题。 首先，了解跨域的含义至关重要。跨域是指由于浏览器的同源策略，JavaScript只能向与当前页面同源（即协议、域名和端口完全相同）的服务器发送...
vue.config.js跨域转发不生效的问题
机智的爆爆哥
01-26 3732
这个问题困住了我近一天 太深刻了 由于跟着教程走的 学的时候学的是vue2 但教程用的是3 后来查了很久才发现 3新增了这个vue.config.js配置文件 所以改用2的跨域解决办法 终于解决了 以下是vue.config.js跨域 需要和src同级目录 且重启生效 let proxyObj = {} proxyObj['/'] = { //目标地址 target: 'http://localhost:8081', //发送请求头中host会设置成target changeOrigin:
Jwt
xiaoyi215的博客
10-11 144
Jwt 1. JWT是什么 JSON Web Token (JWT)，它是目前最流行的跨域身份验证解决方案 2. 为什么使用JWT JWT的精髓在于：“去中心化”，数据是保存在客户端的。 3. JWT的工作原理: 1. 是在服务器身份验证之后，将生成一个JSON对象并将其发送回用户，示例如下： {"UserName": "Chongchong","Role": "Admin","Ex...
【Vue】前端跨域解决方法
weixin_44707049的博客
11-15 4121
情景 Vue项目的url：http://localhost:8080/ 本地后台所在: http://localhost:8081/ 这样就导致了跨域问题，解决方法林林总总，特开一遍文章来持续记录。 前端跨域 vue.config.js 找到项目的根目录下的 vue.config.js 文件（没有就新建），然后在里面输入以下代码： //在根目录下创建vue.config.js,如下配置： module.exports = { devServer: { //跨域 pro
spring-boot和vue跨域、阿里云验证码使用
weixin_45843676的博客
03-08 435
spring-boot和vue跨域、阿里云验证码使用
vue项目跨域问题（图片跨域）devServer.proxy代理失效时，nginx反向代理解决跨域问题
qq_44760347的博客
03-09 3879
vue项目跨域问题（图片跨域）devServer.proxy代理失效时，nginx反向代理解决跨域问题
必备-16.跨域身份验证方式
pinganaaa的博客
12-28 1498
必备-16.跨域身份验证方式 登录态校验 登录态校验 第一步：客户端发送POST请求做登录态校验，服务器端检验用户名密码是否准确，如果正确则返回成功 第二步：客户端收到成功响应后，在本地手动设置cookie，存储登录成功，例如：isLogin=true 第三步：之后再访问页面，检测本地是否有isLogin的cookie信息，有表示已经登陆过了，无需再验证 缺陷： 不准确，不安全，cookie可以随便修改 客户端设置cookie 客户端设置cookie：会话存储 第一步：客户端发送POST
vue 项目 跨域问题
weixin_42571699的博客
11-20 218
方法一：后台配合添加允许跨域 方法二: 谷歌浏览器全局配置 右键->快捷键方式->目标尾部添加 --disable-web-security --user-data-dir=C:\MyChromeDevUserData 方法三：使用代理(只本地有用，上传到服务器需要后端解决跨域问题) 根目录新建vue.config.js //多域名跨域配置 module.exports = ...
vue 本地跨域
dyx001007的博客
03-28 2007
在vue开发中实现跨域：在vue项目根目录下找到vue.config.js文件（如果没有该文件则自己创建），在proxy中设置跨域 module.exports = { devServer:{ proxy: { //配置跨域 '/dev-api': { //目标接口域名 ,dev-api 自定义标识,用来识别带dev-api的请求 target: '地址',// 实际需要访问的接口域名 changeOrigin:true,// 如果接口跨域，需.
react和vue配置proxy跨域请求并且查看测试proxy是否生效
oops
06-09 3854
前端查看测试proxy代理是否生效
vue.config.js proxy不生效
09-05
要使vue.config.js中的proxy生效，需要正确配置devServer.proxy选项。根据引用和引用的内容，可以将vue.config.js配置为以下形式： ```javascript module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:8081', changeOrigin: true, pathRewrite: { '^/api': '' } } } } } ``` 这样配置后，当访问以`/api`开头的接口时，会将请求代理到`http://localhost:8081`上。请注意确保代理目标服务器已启动并能够正确响应请求。 同时，还需要在main.js文件中设置axios.defaults.baseURL为'/api'，如引用所述，以确保axios在发送请求时自动添加/api前缀来实现跨域访问。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vue cli3 配置proxy代理无效的解决](https://download.csdn.net/download/weixin_38622467/14828750)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *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_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值