vue项目部署在宝塔面板上的跨域请求问题

最新推荐文章于 2024-09-07 20:06:30 发布

achiv

最新推荐文章于 2024-09-07 20:06:30 发布

阅读量4.6k

点赞数 2

分类专栏：环境配置问题文章标签： vue nginx

本文链接：https://blog.csdn.net/qq_37088317/article/details/105844680

版权

本文主要介绍了在开发环境和宝塔面板生产环境中解决Vue项目跨域请求的问题。在开发环境，通过修改vue.config.js配置解决；在生产环境，将dist文件上传到宝塔面板新建网站的根目录，并在Nginx配置中添加相应规则来处理跨域。

摘要由CSDN通过智能技术生成

一、开发环境的跨域问题

如果只是在本地环境进行vue项目测试，当vue使用axios请求后端接口时，跨域配置如下：
在config文件夹里面的index.js里面添加：
在这里插入图片描述
代码：

	proxyTable: {
    // axios跨域处理
      '/api': {
    // 此处并非和url一致
        target:'http://xxx.xx.xxx.xxx:8080',
        changeOrigin:true, //允许跨域
        pathRewrite:{
   
          '^/api': ''

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

achiv

关注关注

2
点赞
踩
13

收藏

觉得还不错? 一键收藏
6
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Vue axios 跨域请求无法带上cookie的解决

10-14

此外，还要注意的是，如果使用了代理（例如在Vue CLI中使用`vue.config.js`配置的proxy），在开发环境中，跨域问题通常能得到解决，因为代理服务器会转发请求并处理响应头，使得前端能够正确地携带cookie。但在生产...

vue+vite+宝塔项目打包上线云服务器详细过程（含echarts数据请求跨域问题）

weixin_52084329的博客

11-26

1794

又是心情异常复杂的一篇文章，但是万事开头难，还是超级开心啊哈哈哈哈哈哈哈！这是自己写的一个小项目，基于vite创建，包含了echarts调用api请求数据，所以里面涉及到了跨域问题困扰了我很久！

6 条评论您还未登录，请先登录后发表或查看评论

宝塔部署项目&跨域

u014632228的博客

02-16

5099

宝塔部署

宝塔部署Vue项目解决跨域问题

最新发布

niulinbiao的博客

09-07

1073

使用宝塔面板部署前端后端项目相比用命令行进行部署要简单许多，宝塔的可视化操作对那些对Linux不熟悉的人很友好。1、视频教程2、文字教程13、文字教程2以上的教程完全可以按照步骤一步一步进行部署，但是部署过程中，会遇到很多问题，例如前端的跨域问题，本文在遇到上述问题并解决后，特此记录一下。

宝塔面板设置跨域

奇遇少年

01-15

2624

宝塔面板跨域设置主要涉及到nginx服务器

项目部署上线（跨域问题的处理）

m0_73966521的博客

07-21

1428

镜像（Mirroring）是一种文件存储形式，是冗余的一种类型，一个磁盘上的数据在另一个磁盘上存在一个完全相同的副本即为镜像。我觉得可以理解为一份文件的副本。

宝塔面板怎么解决nginx跨域问题

风止的博客

05-12

1805

宝塔有一点不同，nginx配置文件不在nginx的安装目录中，应当去/www/server/panel/vhost/nginx找到。1.找到宝塔的nginx配置文件。2.添加你要跨域的地址。

宝塔面板网站解决跨域问题

软希网分享源码的博客

11-12

6419

宝塔面板网站解决跨域问题

详解Vue-cli 创建的项目如何跨域请求

08-30

在本篇文章中，我们将详细介绍 Vue-cli 创建的项目如何跨域请求。跨域请求是指在不同的域名之间进行交互，例如从 localhost:8023 访问 localhost:9000 上的接口。在 Vue-cli 创建的项目中，我们可以利用 Node.js ...

Vue跨域请求问题解决方案过程解析

10-14

在Web开发中，跨域问题是常见的阻碍，尤其是在前端框架如Vue.js中进行API请求时。Vue跨域请求问题主要是由于浏览器的同源策略限制，它不允许JavaScript从一个域名下的网页向另一个域名下的服务器发送HTTP请求，除非...

Vue项目中跨域问题解决方案

08-27

在开发Vue项目时，我们经常会遇到跨域问题，这主要是由于浏览器的安全策略限制了不同源之间的请求。跨域问题可以通过多种方式解决，本文主要讲解在使用vue-cli搭建的项目中，如何通过更改Header和使用...

Vue项目部署在Spring Boot出现页面空白问题的解决方案

10-17

关于Vue项目在Spring Boot中部署遇到页面空白问题，其背后涉及到前端路由与后端配置之间的相互作用，以及资源加载路径的适配问题。这一问题在前后端分离的应用架构中尤为常见，因此掌握相应的解决策略对于前端开发者...

宝塔面板解决跨域

solocao的专栏

03-16

7774

1、找到宝塔面板配置nginx文件的地方 2、增加如下代码 add_header Access-Control-Allow-Origin '*'; add_header Access-Control-Allow-Methods 'POST,PUT,GET,DELETE'; add_header Access-Control-Allow-Headers 'version, access-token, user-token, Accept, apiAuth, User-Agent, Keep-Alive, .

宝塔面板使用Nginx反向代理解决跨域问题，超简单！！

热门推荐

SoSalty的博客

07-03

2万+

宝塔面板使用Nginx反向代理解决跨域问题

Spring Boot + Vue 前后端分离项目的部署

qq_45716120的博客

02-07

4226

把 spring boot 的 jar 包上传至服务器任意目录，然后通过后台运行 Jar 命令运行程序注意修改端口，以及阿里云、宝塔的放行服务器查看进程 ps -ef | grep java 后台运行 jar nohup java -jar shareniu.jar >log.txt & 根据端口杀死进程 sudo fuser -k -n tcp 8080 ...

宝塔面板部署前后端分离项目（解决跨域问题）

SpongeBob_shouse的博客

02-06

4424

springboot+vue+redis采用宝塔面板进行部署解决nigix跨域问题。

宝塔反向代理设置的一些坑

wzh70的博客

03-17

7390

在对宝塔的反向代理设置前，先读下这篇文章： Nginx常用反向代理配置规则_JunyouYH的博客-CSDN博客_nginx反向代理规则然后我说下目标： www.doman.com/api/ 在宝塔nginx的反向代理设置后改为：127.0.0.1:9999 1.然后就对宝塔的反向代理设置了如图（不懂得去宝塔官网搜下）查看配置表如下：但是结果却是：当我提交www.doman.com/api/时后台接受的数据为：127.0.0.1:9999/api/ 多了个/api。解..

宝塔部署项目遇到“Access-Control-Allow-Origin”跨域问题，通过调整nginx的时候需要注意，不是在nginx配置文件，是在网站管理里面进行配置

feixuewisdomlee的博客

05-05

1291

uniapp项目遇到跨域问题的解决方法

宝塔面板Nginx设置所有文件或某文件目录允许跨域请求

taihom的专栏

11-14

2284

宝塔面板Nginx设置所有文件或某文件目录允许跨域请求

宝塔部署vue项目跨域

09-03

宝塔面板可以通过Nginx来部署Vue项目，并解决跨域问题。在部署过程中，需要进行以下步骤： 1. 首先，使用npm run build命令打包Vue项目，成功后会在项目根目录下生成一个dist文件夹。 2. 在宝塔面板中，选择对应的网站，点击设置，进入网站设置页面。 3. 在左侧菜单中，点击Nginx，进入Nginx配置页面。 4. 在Nginx配置页面的顶部，可以看到一段配置示例，将这段示例替换为以下配置代码： ``` location / { root /path/to/your/dist; # 指向Vue项目打包后的dist文件夹路径 index index.html index.htm; } location /api/ { proxy_pass http://localhost:9777/; # 将请求转发到后端接口的运行端口 } ``` 注意将`/path/to/your/dist`替换为你实际的Vue项目dist文件夹的路径，将`http://localhost:9777/`替换为你实际的后端接口的运行端口。 5. 保存并应用配置。通过以上步骤，宝塔面板已经成功部署了Vue项目，并且解决了跨域问题。你可以通过公网IP加上Vue项目的端口号和项目名称来访问部署的项目。例如，`公网IP:Vue项目端口号/项目名称`。123 #### 引用[.reference_title] - *1* *2* [宝塔部署项目&跨域](https://blog.csdn.net/u014632228/article/details/129066281)[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%"] - *3* [Spring Boot + Vue 前后端分离项目的部署](https://blog.csdn.net/qq_45716120/article/details/112985281)[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 ]