vue3 跨域proxy

最新推荐文章于 2024-08-08 15:28:54 发布
最新推荐文章于 2024-08-08 15:28:54 发布
阅读量59 收藏
点赞数 1
分类专栏： proxy 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51553392/article/details/134052928
版权
文章讲述了如何在Vue项目中正确配置`vue.config.js`的devServer部分以实现跨域，以及如何避免在封装axios时错误设置baseURL。重点强调了改变默认请求路径以简化API访问。
摘要由CSDN通过智能技术生成

vue.config.js 代码：

devServer: {
		proxy: { // 配置跨域
			'/NewService': {
				target: `http://192.168.0.254:9007`, //请求后台接口
				changeOrigin: true, // 允许跨域
				// pathRewrite: {
				// 	'^/NewService': '/' // 重写请求
				// }
			},
		},
}

在封装axios时要加上：

axios.defaults.baseURL = '/NewService'

（切记不要写成这样）

axios.defaults.baseURL = 'http://192.168.0.254:9007/NewService'
小七想发言
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue3+vite用proxy解决跨域及proxy原理解析
Web_boom的博客
06-21 1万+
前端跨域的方式是面试八股文中常见的一部分，最近面试中也是被问到跨域的问题，跨域的解决方案无非就是几个本地项目中调试用的最多的就是 node代理如果是跨域，你将会发现下图的报错，经典的跨域问题，前端和后端都是我的本地项目，但仅仅是端口的不同，浏览器请求就发生了跨域的问题 先开启一个后端node服务 由于需要用到一个后端接口来测试是否能够发生跨域效果，我们利用node开启一个服务，在vue项目之外开启一个node文件，然后执行以下代码 vscode中可以直接下载一个工具用来跑node文件，直接右键就能运行,非常
vue3跨域请求及一些常用配置
weixin_42371812的博客
01-22 4426
3、上面两步都完成后，我们就可以正常来请求我们的接口了。当然，为了以后更方便的维护自己的代码，业内也一般会有一个规范（当然 ，也不是一定得这样）。在使用vue3开发的时候，总免不了做一些基础的配置。接下来，我就做一些自己在在开发中所运用到一些常用配置。其实，对于跨域配置，我之前的博文中也有说过，在这儿我也就大概再讲一次。目录（其实文件夹的名字可以随意，但为了规范【网上也是多是这样子的名字】），之后在该目录下新建一个。文件中配置，网上有说这个文件不能配置，经测试，也没啥毛病。，再在api目录下新建一个。
Vue3跨域代理设置
Leo_DLi的博客
02-01 911
Vue 3 的项目, 在通过 vite 来创建项目之后, 会自动创建一个 vite.config.js 文件, 跨域的代理就可以在这个文件中配置了。注释基本说明了对应配置参数的作用, 更多配置参数请。
【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-pure-admin：企业级中后台管理的技术革新
chenchuang0128的博客
03-15 7837
在当今快速发展的技术领域，企业级中后台管理系统的重要性日益凸显。为了满足这一需求，开源社区提供了许多中后台管理系统模版。其中，vue-pure-admin以其先进的技术特性和强大的功能，成为了一个备受关注的选择。一、技术概述vue-pure-admin是一款基于Vue3、Vite、Element-Plus、TypeScript等最新技术栈开发的中后台管理系统模版。它全面采用ECMAScript模块（ESM）规范来编写和组织代码，确保了代码的模块化和可维护性。
vue 本地环境跨域请求proxyTable的方法
10-17
本文将详细介绍如何在Vue的本地环境中设置`proxyTable`以实现跨域请求。 首先，`proxyTable`是Vue CLI的webpack-dev-server配置的一部分，它允许我们在开发阶段将本地的API请求转发到远程服务器，从而绕过浏览器的...
vue cli3 配置proxy代理无效的解决
10-16
总的来说，当遇到Vue CLI 3的`proxy`代理无效时，首先要检查配置是否正确，然后排查端口、请求路径和跨域设置。如果仍然无法解决问题，可能需要查看浏览器的开发者工具网络面板，检查请求是否被正确发送以及返回的...
springboot vue 跨域问题的解决
08-26
Spring Boot Vue 跨域问题的解决 跨域问题是指一个域名下的网页无法访问另一个域名下的资源，导致浏览器无法加载页面或出现安全警告。Spring Boot 和 Vue.js 是两个非常流行的技术栈，但是它们之间存在跨域问题。...
vue proxyTable 接口跨域请求调试的示例
08-29
Vue ProxyTable 接口跨域请求调试示例 Vue ProxyTable 是一种用于解决跨域请求的技术，通过配置 proxyTable，可以实现接口的跨域请求调试。本文主要介绍了 Vue ProxyTable 接口跨域请求调试的示例，旨在帮助开发者...
Vue axios 跨域请求无法带上cookie的解决
10-14
此外，还要注意的是，如果使用了代理（例如在Vue CLI中使用`vue.config.js`配置的proxy），在开发环境中，跨域问题通常能得到解决，因为代理服务器会转发请求并处理响应头，使得前端能够正确地携带cookie。...
vue3.0-axios拦截器、proxy跨域代理
qq_52822043的博客
04-27 7676
1. vue-cli 1）vue-cli vue-cli（vue脚手架）是vue官方提供的、快速生成vue工程化项目的工具。 官方首页：Vue CLI 特点： 开箱即用 基于webpack 功能丰富且易于扩展 支持创建vue2和vue3的项目 2）安装vue-cli vue-cli是基于Node.js开发出来的工具，因此需要使用npm将它安装为全局可用的工具： ①解决Windows PowerShell不识别vue命令的问题 3）创建项目 4）基于vue ui创...
Vue3设置Proxy代理解决跨域
Lwh2004的博客
04-12 1万+
Proxy Vue3当中的跨域解决方案还是跟Vue2差不多用的都是proxy,而且Vue3的双绑原理也是用的proxy来进行数据的拦截。 我们在V3当中创建完项目之后是没有vue.config.js文件的 我们需要手动在根节点去新建一个vue.config.js文件 在里面就可以做基本的配置了 如果需要做多个域名的跨域的话，就在proxy当中在多写一个api在里面的target中接着配置。 ...
前端vue-cli3解决跨域的方案(配置proxy代理)
VACAN3的博客
06-23 4395
浏览器的跨域报错 vue-cli2和cli3解决跨域的方法是有区别的,在这个点上绕了不少弯,proxyTable/proxy 其实方法很简单,重点在手动创建的根目录里vue.config.js的proxy配置,vue.config.js里的配置项都是可选的,我们只需要配置自己需要的部分就可以。 1. 修改vue.config.js devServer: { open: true, //是否自动弹出浏览器页面 host: "localhost", port: '8080', proxy: {
vue-cli3跨域处理，解决500错误以及Proxy error
bailizx
05-06 1万+
目录 1 上代码（使用的是vue-cli3脚手架） 2问题 3 解决办法（度娘？？？？）一个bug找了半天方法？ 4 修得正果 5 总结 1 上代码（使用的是vue-cli3脚手架） 1）目录 2） vue.config.js 这里只要看devServer这一项就ok // vue.config.js const path = require("path"); const ...
vue3配置proxy解决跨域
universe的博客
09-20 4012
跨域问题是前端开发中较常见的问题，因为javascript的浏览器会支持同源策略，如果域名、协议、端口任意不同就会产生跨域，如果非同源，那么在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问，错误信息如下：Access to XMLHttpRequest at ‘http://baidu.cn/api/b1/auth/login’ from origin ‘http://localhost:...
Vue3.0中解决跨域代理问题
许魁的博客
02-05 7205
图文未动，代码先行： module.exports = { devServer: { proxy: { '/api': { target: 'https://you.163.com/', //接口域名 changeOrigin: true, //是否跨域 ...
vue-cli3 配置proxy代理解决开发环境跨域问题
weixin_34392843的博客
04-26 4173
场景 在开发环境遇到跨域的问题，无法利用后端做相关配置来解决，所以只能用前端的方法来实现跨域访问。 一、概念介绍 1、跨域介绍 这里的域指的是协议+域名+端口号，当目标url的协议和域名以及端口号三者都和我们网站本身的url一样时，被认为同域，不一样则认为跨域，浏览器会对跨域的请求进行限制，出于安全方面的考虑。因此只有浏览器会遇到限制，而在node环境发起同样的请求不会受限制。 2、代理原理介绍 ...
vue+elementui 表格分页限制最大页码数
曦光
08-06 334
表格限制最大页码数
vue的diff算法的【双端比较】策略
最新发布
yiguoxiaohai的博客
08-08 314
vue的diff算法的双端比较策略
vue配置跨域proxy
05-01
Vue是一个前端框架，通常情况下，我们将Vue应用的静态资源（如HTML、CSS、JS）部署在Web服务器上，然后使用Ajax技术获取数据，这就涉及到了跨域请求的问题。为了解决这个问题，我们需要在Vue应用中进行跨域代理设置。 Vue提供了一个内置的HTTP代理插件，可以使用该插件来代理HTTP请求。需要在Vue项目根目录下创建一个`vue.config.js`文件。然后在该文件中配置代理服务： ``` module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:8080', //代理服务地址 changeOrigin: true, //允许改变Origin请求头 pathRewrite: { '^/api': '' //重写路径，将/api开头的请求重写为根路径 } } } } } ``` 以上配置的含义是，将所有以`/api`开头的请求代理到`http://localhost:8080`服务器上，并将所有这些请求的路径重写为跟路径。在Vue应用中，任何以`/api`开头的Ajax请求都会被代理到`http://localhost:8080`服务器上，实现跨域请求。 需要注意的是，一定要配置好代理服务的地址，并确保代理服务已经启动。在启动Vue开发服务器时，可以通过`npm run serve -- --port=3000`命令来指定启动端口号。 以上就是关于Vue跨域代理的简单介绍，如果需要实现更多高级功能，还需进一步深入研究。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小七想发言

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值