vue 发布到正式环境跨域配置（及部署后无法通过路由访问问题）

最新推荐文章于 2023-12-07 16:22:33 发布
最新推荐文章于 2023-12-07 16:22:33 发布
阅读量4.4k 收藏 6
点赞数 3
分类专栏： vue3 vue vue小白炼成记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chpswg/article/details/105368938
版权
vue在本地跨域通过配置proxy没有问题，但是发布到正式环境后仍然存在跨域问题，只有通过跨域1、在vue.config.js文件中devServer下的proxy子节点添加正式环境跨域参数，这里在正式环境的跨域为api3s2、配置正式环境参数2.1 配置基于axios的请求跨域，新建axois的基础配置文件https.js，配置axios的默认url ，这样在正式环境，a...
摘要由CSDN通过智能技术生成

vue在本地跨域通过配置proxy没有问题，但是发布到正式环境后仍然存在跨域问题，只有通过跨域

1、在vue.config.js文件中devServer下的proxy子节点添加正式环境跨域参数，这里在正式环境的跨域为api3s

 

2、配置正式环境参数

在config目录下配置主配置文件index.js，引入不同环境的配置

2.1 配置基于axios的请求

最低0.47元/天 解锁文章
cici_cmh
关注
  • 3
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue打包之后的项目在nginx的部署404,以及无法跳转路由问题
qq_39330397的博客
06-29 6432
常见的使用场景是在单页应用程序（SPA）中，将所有请求都指向主页（如 index.html），然后由前端路由进行处理。这个配置将 /redirect-me 路径的请求重定向到 http://example.com/new-location，并使用 permanent 参数表示永久重定向。你需要将 /path/to/your/static/files 替换为实际的静态文件路径。这个配置将把所有 /old-path/ 开头的请求重写到 /new-path/，并将原始路径中的内容保留。# 指定静态文件的根目录。
vue新包部署服务器却不能访问!切记备份旧包
最新发布
lgq1368853532的博客
05-23 317
1.正常部署需要把旧包备份删除,替换新包。无需删除新包,直接覆盖,切记备份旧包。然后停止,启动tomcat。2.个别项目需要备份旧包。
在vue中怎么解决跨域问题（CORS）
weixin_48674314的博客
05-19 9070
CORS（跨域资源共享）：如果你有权限控制后端接口，可以在后端设置 CORS 头部信息，允许特定的源（包括端口和协议）访问该接口。需要注意的是，在生产环境中，由于安全性和跨域限制的考虑，应该限制跨域请求的源和目标，避免不必要的安全风险。在生产环境中，应该由后端配置合适的跨域策略，以确保安全性。1. 代理服务器：在开发环境中，可以配置一个代理服务器来转发 API 请求，绕过浏览器的同源策略。在生产环境中，前端解决跨域问题的方法有限，因为浏览器的同源策略限制了跨域访问。在Vue中解决跨域问题有多种方法。
关于在实际生产环境中怎么实现跨域的问题
weixin_43811753的博客
04-17 599
关于在实际生产环境中怎么实现跨域的问题
Vue中跨域及打包部署到nginx跨域设置方法
10-16
主要介绍了Vue中跨域以及打包部署到nginx跨域设置方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
Vue开发环境跨域访问问题
10-15
总结一下，Vue开发环境下的跨域访问问题可以通过配置`webpack-dev-server`的代理功能来解决。在`config/index.js`中添加`proxyTable`配置，指定目标服务器地址和路径重写规则，即可实现前端与不同源服务器的通信。...
Vue动态加载图片在跨域时无法显示的问题及解决方法
10-15
主要介绍了解决VUE动态加载图片在跨域时无法显示的问题,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
超级简单！vue解决前后端跨域问题，看完就会
taozi_028的博客
07-13 736
超级简单！vue解决前后端跨域问题，看完就会
vue打包后页面为空白或者路由跳转404解决
qq_24683975的博客
01-10 1865
build后生成的dict文件夹内的index.html打开是空白页面，此时在。编辑nginx配置文件，添加如下代码。
Vue项目部署到服务器上路由无法访问的问题
hero_th的博客
03-27 2915
打开router 文件夹下面的index.js文件 将路由模式由’history’改成’hash’ 重新渲染项目 就OK了
vue2 vue-router 不显示页面问题
热门推荐
LlanyW的专栏
10-30 1万+
最后发现是vue-router版本的问题,最新的版本是4.x.x ， 使用cnpm install vue-router -S， 时默认安装了最新。我的项目的问题是，版本不兼容，环境配置不对。在项目配置的时候，默认 npm 包导出的是运行时构建，即 runtime 版本，不支持编译 template 模板。vue 在初始化项目配置的时候，有两个运行环境配置的版本：Compiler 版本、Runtime 版本。首先去看了是否是vue-router引用的问题,排除掉引用问题之后,网上冲浪找了不少方法,
vue3中使用路由功能，页面路由内容不能正常显示，并且路由标签不能点击
weixin_51174757的博客
09-07 1956
插件的执行应该在mount钩子之前，将代码的顺序调整一下，页面就可以正常显示，并且控制台也不再有warn报错。上网查询了很多帖子，并没有能解决这个问题，突然想到是不是main.js文件中代码的执行顺序有问题。最近在用vue写项目，在配置路由时碰到了一个问题。
记：vite3+vue3+axios前端项目跨域问题解决【前端和服务器nginx配置】
qq_23404533的博客
12-07 5200
env.development、.env.production中的常量命名须以"VITE_"开头，这里定义的常量为VITE_APP_PROXY_BASE_API，值分别为"/proxyCustomerApi-dev"、"/proxyCustomerApi-pro"用以区分开发环境和生产环境，值可自定义为"/+自己想定义的内容"接下来处理生产环境（线上模式）下的跨域报错问题，由于刚刚前端的配置中已经加上了对生产环境的代理配置，其实也就是根目录下的这个文件【.env.production】。
Vue项目跨域之后如何部署到服务器
mxtianv的博客
06-05 376
Vue项目跨域之后如果部署到服务器 使用nginx搭建 在nginx中找到配置文件添加以下代码即可。 location /api/ { rewrite ^/b/(.*)$ /$1 break; proxy_pass http://你跨域的地址/; }
Vue proxy代理
夜月晓晓的博客
08-04 4397
vue 跨域解决方案--proxy代理
Vue3 vite.config.js配置跨域
04-08 2415
已知有个api地址 后端地址是http://localhost:5000/api/getList。例如：http://localhost:5000，https://192.168.1.10:5000 协议+域名+端口号。程序就自动把/api 替换为http://localhost:5000/api/前端的vue程序 运行地址是http://localhost:3000。2、前台的地址也可以配置 http://localhost:3000。
vue项目加上路由组件页面不显示
weixin_61286286的博客
05-01 4134
注意：切记已经要export default router导出，不然在下面main.js中配置是import导入会找不到index.js这个文件。查看项目文件中package.json(或package-lock.json)中vue-router依赖是否成功添加。这个问题的主要还是路由没有配置好，导致App.vue文件无法显示，下面是。配置路由表index.js。
IIS10.0部署netcor+vue前后端两个HTTPS域名方法IIS配置API接口转发
06-15
本文介绍了如何在IIS 10.0上部署.NET Core API与Vue.js应用，并实现前后端分别使用HTTPS域名的方法，包括配置API接口转发、设置SSL证书以及处理Vue刷新后出现400错误的问题。 1. 部署.NET Core API - 发布API项目...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值