Vue3配置代理解决跨域请求及携带Cookie问题

这篇具有很好参考价值的文章主要介绍了Vue3配置代理解决跨域请求及携带Cookie问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在前后端开发的过程中,经常涉及跨域请求的问题。

  1. 跨域请求。
  2. axios发送请求时携带cookie,用于后端用户认证。
问题1解决:

给vue3配置代理服务器,后台无需进行跨域请求配置。在 vue.config.js 配置文件中进行配置。添加一下代码

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  
  // 添加代码 beg
  devServer:{
    port:"3333", // 配置本地vue服务的端口号
    // 配置代理
    proxy:{ 
      '/note':{
        target:'http://192.168.9.60:5555/note',
        changeOrigin:true, // 是否允许跨域请求
        pathRewrite:{
          // 配置路径重写。说明:用 /note 代替【target地址】 http://192.168.9.60:5555/note 。
          // 例如:axios请求的时候URL地址: /note/login 就是 http://192.168.9.60:5555/note/login
          '^/note': '' 
        }
      }
    }
  }
  // 添加代码 end
  
})

问题2解决:

配置axios发送请求的时候带上cookie。配置之后接收的cookie会自动保存好,发送的时候会自动携带。

import axios from 'axios'
axios.defaults.withCredentials = true;

注意:要解决问题1之后,再解决问题2,否则就会出现跨域请求的问题。文章来源地址https://www.toymoban.com/news/detail-794044.html

到了这里,关于Vue3配置代理解决跨域请求及携带Cookie问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • react通过axios发送请求并演示配置多个反向代理地址解决跨域

    这里 我们准备一个接口 我这里用java写了一个 然后 我们打开react项目 安装axios 然后在src下创建一个setupProxy.js 编写代码如下 可以看到 这里我们配了两个方向代理 如果请求的路中 包含api 就会代理成 http://localhost:8080/请求路径 如果包含user则会成为 http://localhost:808/请求路径 这

    2023年04月10日
    浏览(53)
  • Vite 配置代理 Proxy,Vue配置代理,解决前端跨域

    我们在做项目的时候经常会遇到跨域的问题,之所以会出现跨域问题是因为浏览器的同源策略,即协议、域名、端口需要一致,才可以访问服务端的资源。当一个请求地址(服务端的地址)的协议、域名、端口三者之间任意一个与当前页面地址(前端页面地址)不同即为跨域

    2024年02月17日
    浏览(54)
  • Vue-配置代理(解决跨域问题)

    现在解决跨域主要有两种方式是CORS和Jsonp,但是在开发中用的比较多的是配置一个代理服务器。   上面那个图,左边是客户端所处位置,中间是代理服务器,要注意,红色框是客户所处位置,右边蓝色框是5000服务器,中间的粉色框因为是服务器和蓝色框服务器 之间进行数据

    2024年02月05日
    浏览(47)
  • 已配置vue.config.js中的proxy代理,前端本地环境仍然请求后端出现跨域报错

    已配置vue.config.js中的proxy代理,前端本地环境仍然请求后端出现跨域报错 已配置vue.config.js中的proxy代理,前端本地环境仍然请求后端出现跨域报错 控制台仍然出现cors禁止报错,接口调不通 配置proxy代理解决跨域问题的原理是: 前端工程本地环境会启动一个 express 或 koa 的

    2024年02月01日
    浏览(58)
  • Vue3---请求拦截器携带token

    为什么要在请求拦截器携带Token? Token作为用户标识,在很多个接口中都需要携带Token才可以正确获取数据,所以需要在接口调用时携带Token。另外,为了统一控制采取请求拦截器携带的方案 如何配置? Axios请求 拦截器 可以在接口正式发起之前对请求参数做一些事情,通常Toke

    2024年02月15日
    浏览(45)
  • Flask 登陆生成cookie,携带cookie请求

    导入所需的模块: Flask 、 request 、 jsonify 和 random 。 创建一个Flask应用程序实例,并设置 SECRET_KEY 配置。 /login 路由定义为 POST 方法。它检查提供的用户名和密码是否与硬编码的值( admin 和 admin )匹配。如果登录成功,它生成一个随机的cookie,并返回一个带有成功消息和生成

    2024年02月16日
    浏览(61)
  • postman请求携带Cookie

    本文提供一种让请求携带Cookie的高效解决方案,之前试过使用 Postman Interceptor 插件,但是刚开始配置完有效,过了一天后就失效了,所以自己去找其它方法实现了。 原文:语雀 **思路:使用环境变量 步骤 关闭自动生成的Cookie头 设置环境变量 把环境变量添加到请求参数中(

    2024年02月11日
    浏览(41)
  • Vite+Vue3项目如何获取环境配置,并解决前端跨域问题

    根目录新建.env.development和.env.production文件 package.json配置启动参数 vite命令启动项目时,指定mode参数,加载vite.config.ts文件。 配置代理 在vite.config.ts中配置代理 配置vite-plugin-html 通过vite-plugin-html组件,可以将配置文件中的数据,绑定到index.html中,可以实现不同环境的页面ti

    2024年02月19日
    浏览(66)
  • 10-Vue技术栈之脚手架配置代理(解决跨域问题)+ GitHub用户搜索案例

    ​ 在vue.config.js中添加如下配置: 说明: 优点:配置简单,请求资源时直接发给前端(8080)即可。 缺点:不能配置多个代理,不能灵活的控制请求是否走代理。 工作方式:若按照上述配置代理,当请求了前端不存在的资源时,那么该请求会转发给服务器 (优先匹配前端资

    2024年02月07日
    浏览(47)
  • vue项目使用vite设置proxy代理,vite.config.js配置,解决本地跨域问题

    非同源请求,也就是协议(protocol)、端口(port)、主机(host)其中一项不相同的时候,这时候就会产生跨域 vite的proxy代理和vue-cli的proxy大致相同,需要在vite.config.js文件中配置(打包配置也在此) 代理配置在server中,可以上vite官网服务器选项查看server.proxy代码示例:开发服务器选

    2024年01月21日
    浏览(59)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包