vue前后端端口不一致解决方案

最新推荐文章于 2025-02-25 09:30:00 发布
转载 最新推荐文章于 2025-02-25 09:30:00 发布 · 1.4w 阅读 · 9

本文介绍如何在config index.js文件中设置代理，通过添加proxyTable实现前端接口调用后端服务，解决跨域问题。配置中使用了'http://localhost:3000'作为目标地址，并通过pathRewrite重写请求路径。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在config  index.js文件中

引入如下代码即可

proxyTable: {

'/api': {

target: 'http://localhost:3000',//要访问的后端接口

changeOrigin: true,

pathRewrite: {

'^/api': '/'

//这里的配置是正则表达式，以/api开头的将会被用用‘/api'替换掉，假如后台文档的接口是 /api/list/xxx

//前端api接口写：axios.get('/api/list/xxx') ， 被处理之后实际访问的是：http://news.baidu.com/api/list/xxx

}

}},

 

 

 

前端开发 Vue 代理配置(解决前后端域名/Ip/端口不一致导致无法请求的问题)
GIS摆渡人
04-22 9019
文章目录业务说明代理配置修改截图后端服务器代码前端Vue代码 业务说明 假设vue项目的地址是：localhost:80/，比如，页面中请求’http://127.0.0.1:8080/api/user/ss’时，地址只需要写为’/api/user/ss’就可以了。 代理配置 const { defineConfig } = require('@vue/cli-service') const AutoImport = require('unplugin-auto-import/webpack') cons
vue前后端分离项目，解决跨域问题
刘辉的专栏
10-31 1万+
最近公司新开发项目是前后端分离项目，前端用的是vue框架，在和前端调试接口时存在拒绝跨域访问403的情况。我这里主要将解决的过程记录一下。 什么是跨域 跨域是浏览器的同源策略造成的，只要是域名、端口、协议有一不同，就会被当做是不同的域，之间的请求就被当做跨域操作。 设置同源限制主要是为了安全，如果没有同源限制存在浏览器中的cookie等其他数据可以任意读取，不同域下DOM任意操作，Ajax任...
解决vue项目中前后端交互的跨域问题、nginx代理配置
upStar1的博客
07-28 4508
解决vue项目中前后端交互的跨域问题、nginx代理配置
vue前后端口不一致如何解决
weixin_48747363的博客
05-22 4406
前后端后不一致
vue Spring boot 前后端分离部署在不同端口上请求数据(跨域问题解决方案)
为什么坚持，想一想当初
07-04 2万+
前言：我的Spring boot项目部署在8083端口，我的vue项目部署在8080端口，我想从8083端口拿到数据，这个不同端口之间的联系会涉及到跨越问题，在vue中如何解决跨域访问拿数据呢，请往下面看。 问题引起的原因： 这里以我的vue8080端口访问Spring boot8083开始。 后台部署情况 前台部署情况 跨越访问 所引发的问题 解决方案 配置基本...
#2Vite+Vue3+SpringMVC前后端分离 解决跨域问题和session每次请求不一致问题
weixin_42718399的博客
01-04 1819
Vite+Vue3+SpringMVC前后端分离通过vite/nginx解决跨域问题和session一致性问题
Vue前后端不同端口实现方案
简单 De 优雅
12-21 9735
前端Vue 8080端口，后端Node.js 8085端口 主要记录下前后端不同端口遇到的问题 1.写服务器端程序，我的在(node_proxy/index.js)下 app.all('*', function (req, res, next) { res.header('Access-Control-Allow-Origin', req.headers.origin || '
关于 Vue3 前后端分离部署的详细指南，包含常见场景、问题与解决方案
繁若华尘的博客
02-25 1306
可有效解决Vue3前后端分离部署中的常见问题。实际部署时需根据具体技术栈调整配置细节。
vue3项目使用npm run dev同时运行两个项目端口冲突处理
dengzihao1023的博客
05-21 477
在启动vue项目的时候在后面自己加入端口：npm run dev -- --port 81
vue项目调用后端用localhost成功，ip地址则后端接收不到
weixin_42384844的博客
06-24 1551
vue项目调用后端用localhost成功，ip地址则后端接收不到 当需要写明ip+端口号，再调用后台时，配置如下可以实现： 1. .env/development文件 # just a flag ENV = 'development' #ip+端口号时需要设置 VUE_APP_BASE_API = '/dev-api' 2. vue.config.js文件 proxy: { // change xxx-api/login => mock/login // detail: https://
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
10-15
在本篇文章里小编给大家整理了关于Vue3项目打包后部署到服务器 请求不到后台接口解决方法，有需要的朋友们可以参考下。
本地项目启动时端口号冲突的解决办法
空山新雨后，天气晚来秋
07-23 1608
查看后台所有进程端口号得到PID：netstat -ano 运行tasklist获取所有进程名称、PID 找到PID对应的进程名，启动任务管理器结束该进程即可
Vue的api端口号问题
Ching | Blog
11-12 865
项目场景： Vue后台管理系统 问题描述： 一大早上班，发现项目npm run dev，启动报错504。这让本来就菜鸡的我更是雪上加霜了 //类似报错信息 [HPM] Error occurred while trying to proxy request /login/ from 127.0.0.1:8080 to http://127.0.0.1:8081 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_er
vue项目启动成功发现端口号和配置中的端口不一致
weixin_43862596的博客
11-18 8378
在vue.config.js文件下配置的port为8082，项目启动，控制台显示的是8083 can be overwritten by process.env.PORT, if port is in use, a free one will be determined 可以被process.env.PORT覆盖，如果端口被使用，将确定一个空闲的端口 （vue-cli配置好了，一旦端口被占用，报错，再次运行时会打开：8080+1,依次类推…8080+n，端口号默认是8080） 问题原因： 是因为项目中8
前后端分离跨域问题
hyly_zhard的博客
08-29 676
后端配置
VUE修改端口后，没启效果，原因是指定端口失效
qq_40291247的博客
08-20 4074
在config/index.js中指定 host: 'localhost', // can be overwritten by process.env.HOST port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined 原因：portfinder新...
Vue项目 跨域 解决方案与 vue.config.js 配置解析
热门推荐
高大志leo的博客
12-07 2万+
为什么会出现跨域？ 出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）。 什么是跨域？ 当一个请求url的协议、域名、端口三
nginx部署VUE和后台端口不一致导致跨域问题解决
rosykee的专栏
12-31 3385
iview-admin项目修改部署到nginx后可以成功运行，但当访问后台接口的时候就出现跨域问题。 由于后端使用的端口和前端不一致导致的问题。 对nginx.conf进行配置 server { listen 8080; server_name ****; location / { root /home/wwwroot/dist; index index.html; } location
spring boot-静态资源跨域
pursue.dreams的博客
12-11 801
package com.jscz.framework.config; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.web.cors.CorsConfigurati...
springboot vue前后端分离项目端口号和localhost端口号不一致
最新发布
03-29
好的，我现在要解决用户的问题：Spring Boot和Vue前后端分离时，由于后端端口号与前端localhost端口不一致导致的跨域问题。首先，我需要回顾一下跨域问题的基本概念和原因。跨域问题主要是由于浏览器的同源策略，当...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值