Vue部署到服务器解决跨域问题

最新推荐文章于 2024-05-14 01:25:23 发布
原创 最新推荐文章于 2024-05-14 01:25:23 发布 · 920 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js

本文介绍如何使用Nginx进行跨域配置。通过在Nginx配置文件中添加特定代码，可以实现从VUE应用到指定服务器的跨域请求。具体步骤包括设置rewrite规则及proxy_pass指令。

使用nginx搭建

在nginx中找到配置文件添加以下代码即可。

/api/  为你VUE配置的跨域配置目标地址

location /api/ {
        rewrite ^/b/(.*)$ /$1 break;
            proxy_pass http://你跨域的地址/;
}

解决Vue部署服务器跨域问题的方法
2301_79331387的博客
09-26 610
跨域是指在浏览器中，当一个请求的源（origin）、协议（protocol）或端口与当前页面的不一致时，浏览器会阻止该请求。然而，当我们需要在Vue应用程序中与不同的服务器进行通信时，就需要解决跨域问题。代理服务器充当中间人，将Vue应用程序的请求转发到目标服务器，并将响应返回给Vue应用程序。CORS是一种通过在服务器响应中添加特定的头部信息来解决跨域问题的机制。以上是解决Vue部署服务器跨域问题的两种常见方法：使用代理服务器和设置CORS头部信息。根据具体的情况，选择适合的方法来解决跨域问题。
阿里云 两个vue项目部署到nginx，并同时实现跨域请求
liuxy_236的博客
12-15 1267
现在有两个项目stock，stock_news,想要将这两个项目同时部署到阿里云CentOS服务器 1、前期准备， 安装nginx对于阿里云如何安装nginx，请参考我的另外一片文章《yum方式 阿里云CentOS7+ 安装nginx》 两个项目vue已经打包成dist文件，阿里云上位置如下 /home/stock/dist /home/stock_news/dist 端口准备：入口8...
Vue项目跨域之后如何部署到服务器
mxtianv的博客
06-05 437
Vue项目跨域之后如果部署到服务器 使用nginx搭建 在nginx中找到配置文件添加以下代码即可。 location /api/ { rewrite ^/b/(.*)$ /$1 break; proxy_pass http://你跨域的地址/; }
【保姆级教学】部署Vue项目至服务器时跨域问题的解决方案
yeahxbf的博客
07-23 2986
【保姆级教学】部署Vue项目至服务器时跨域问题的解决方案
vue项目 axios上传图片到 阿里云 oss， 跨域，405， 400问题处理
业余前端的职业经历
12-22 3857
跨域问题 服务器端处理。添加请求允许的 请求报错。405 使用 formData格式请求数据 let params = new FormData() 注意 content-type 类型必须是 Content-Type: multipart/form-data 如果有全局设置的axios 的请求拦截的话，注意 防止被更改哦 请求报错 400 先检查下参数有没有写错 大小写什么的。 注意 请求的文件流 须放到最后一个位置上 let params = new FormData() params.ap
Vue中跨域及打包部署到nginx跨域设置方法
10-16
本文将详细介绍Vue项目开发中遇到的跨域问题及其解决方法，以及如何将打包后的Vue项目部署到Nginx服务器，并设置跨域。 ### 跨域问题的概述 跨域问题是指由于浏览器的同源策略限制，前端项目中的JavaScript代码...
vue-socket.io跨域问题有效解决方法
10-15
在本文中，我们将详细讨论如何解决Vue-Socket.IO在跨域环境下的问题。 首先，让我们理解一下问题的背景。在开发环境中，Vue CLI提供了一个内置的热模块替换（HMR）服务器，该服务器默认不允许跨域请求。当你的Vue...
解决Vue调用springboot接口403跨域问题
10-16
在本文中，我们将详细探讨如何解决Vue调用Spring Boot接口时遇到的403跨域问题。 ### CORS问题简介 跨域资源共享（CORS）是一种安全机制，它限制了Web页面上脚本在不同域之间请求资源的能力。当一个Web应用试图...
已解决：前端直传阿里oss报错跨域问题，“No ‘Access-Control-Allow-Origin‘”，这个错误基本就是在阿里的开放平台没做规则配置（附我封装的上传源码）
Spy003的博客
04-29 1万+
就直接上阿里oss管理后台去增加一个跨域规则：见图片，特详细配置成这样点确定就好了，就这么简单。
阿里云OSS配置跨域及域名访问
云深海阔专栏
05-14 8542
进入对象存储OSS–>OSS存储桶–>数据安全–>跨域设置–>创建规则。选中后点击上传会提示15分钟生效。证书如下，最后选中新加的证书。切换到数据管理–>静态页面。验证生效后，配置ssl证书。等个几分钟后我们点击。
阿里云OSS上传下载跨域问题
ifredom
05-11 8514
OSS文件传输 使用OSS进行上传/下载操作时，时常会遇到跨域问题。 其表现为，直接通过浏览器，可以直接访问已经存储在OSS中得文件地址并下载，但是通过代码却会报跨域问题. 解决办法：登录阿里云OSS控制台，设置允许跨域.(图文详解在文尾) 示例前端代码 前端vue项目示例 下载 const scoreXml = await axios.get(scoreUrl); 上传 <template> <upload-component @click="fnUplo
vue项目前端开发过程和部署过程遇到跨域如何解决
weixin_42667972的博客
08-21 1209
vue项目解决cors跨域
nginx反向代理(注意点)
企鹅菜鸟的成长过程
07-16 4952
nginx反向代理遇到的一些小问题
Nginx基础——Rewrite规则
芋道源码
08-01 375
点击上方“芋道源码”，选择“置顶公众号”技术文章第一时间送达！源码精品专栏 精尽 Dubbo 原理与源码专栏( 已经完成 69+ 篇，预计总共 75+ 篇 )中文详细注释...
nginx之ReWrite语法
落日流年
08-15 5491
转载自：https://www.cnblogs.com/crazylqy/p/6892010.html 1 ReWrite语法 Nginx提供的全局变量或自己设置的变量，结合正则表达式和标志位实现url重写以及重定向。 rewrite只能放在server{},location{},if{}中， 并且只能对域名后边的除去传递的参数外的字符串起作用。 Rewrite主要的功能就是实现URL的...
nginx 的 rewrite 命令详解
热门推荐
JineD的博客
06-07 1万+
作用域:server, location, if 这个指令根据表达式来更改URI，或者修改字符串。指令根据配置文件中的顺序来执行。 注意重写表达式只对相对路径有效。如果你想配对主机名，你应该使用if语句。 rewrite只是会改写路径部分的东东，不会改动用户的输入参数，因此这里的if规则里面，你无需关心用户在浏览器里输入的参数，rewrite后会自动添加的，因此，我们只是加上了一个？号和后面我们想要的一个小小的参数 ***https=1就可以了。 Nginx Rewrite规则相关指令 Ngin.
nginx配置location总结及rewrite规则写法
weixin_34111790的博客
05-26 2927
location正则写法 一个示例： location = / { # 精确匹配 / ，主机名后面不能带任何字符串 [ configuration A ] } location / { # 因为所有的地址都以 / 开头，所以这条规则将匹配到所有请求 # 但是正则和最长字符串会优先匹配 [ configura...
Nginx解决vue项目服务器部署以及跨域访问后端
袁的博客
11-06 1万+
Nginx解决vue项目服务器部署以及跨域访问后端
前后端分离的springboot+vue项目部署到云服务器（利用nginx解决前端跨域问题）
qq_60747766的博客
09-03 3945
前后端分离的springboot+vue项目部署，利用nginx转发解决前端跨域问题
vue项目部署到nginx跨域问题
最新发布
06-16
### Vue 项目 Nginx 部署跨域配置解决方案 在将 Vue 项目部署到 Nginx 时，跨域问题是一个常见的挑战。以下是完整的解决方案： #### 1. 确保 Vue 项目的正确打包 在开发阶段，Vue 的 `vue.config.js` 文件中可以通过代理解决跨域问题[^3]。然而，在生产环境中，需要移除或注释掉该文件中的代理配置，以避免与 Nginx 的反向代理冲突[^4]。 ```javascript // vue.config.js module.exports = { publicPath: './', runtimeCompiler: true, // devServer: { // proxy: { // '/api': { // target: 'http://后端服务器IP:8091', // changeOrigin: true, // pathRewrite: { '^/api': '' } // } // } // } }; ``` #### 2. Nginx 配置解决跨域问题 Nginx 的配置是解决跨域问题的核心。以下是一个典型的 Nginx 配置示例，确保 Vue Router 和反向代理功能正常工作[^2]。 ```nginx server { listen 80; server_name www.xxx.cn; root /www/wwwroot/www.xxx.cn/dist; # 确保 Vue Router 正常工作 location / { try_files $uri $uri/ /index.html; index index.html; } # 反向代理配置 location /api/ { proxy_pass https://api.xxx.cn/; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } # 解决跨域问题 add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS'; add_header Access-Control-Allow-Headers 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization'; # 处理预检请求 if ($request_method = 'OPTIONS') { add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS'; add_header Access-Control-Allow-Headers 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization'; return 204; } } ``` #### 3. 注意事项 - **路径匹配**：确保前端请求的 API 路径与 Nginx 的 `location` 匹配规则一致[^5]。 - **真实 IP 地址获取**：通过 `proxy_set_header` 设置，后端可以获取真实的客户端 IP 地址。 - **CORS 配置**：使用 `add_header` 指令添加必要的 CORS（跨域资源共享）头部信息。 #### 4. 测试与验证 完成配置后，重启 Nginx 并测试前端是否能够正确访问后端接口。如果仍然出现跨域问题，检查以下内容： - Nginx 配置是否生效。 - 后端服务是否允许来自前端的跨域请求。 ```bash sudo nginx -t # 检查配置文件语法 sudo systemctl restart nginx # 重启 Nginx ``` --- ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

qaakd

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

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

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

打赏作者

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

抵扣说明：

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

余额充值