Vue Nginx反向代理配置 解决生产环境跨域

最新推荐文章于 2024-04-05 20:17:55 发布
最新推荐文章于 2024-04-05 20:17:55 发布
阅读量1.2w 收藏 12
点赞数
分类专栏： Vue 文章标签： Vue 生产环境跨域 Nginx反向代理

Vue 本地代理编辑好后，能实现跨域获取接口数据，但是打包后在生产环境接口报错404，要怎样才能解决生产环境跨域问题呢？
在开发环境配置好本地代理后，使用Nginx反向代理解决生产环境跨域问题！

1、修改Nginx的配置文件 xxx.conf

location /api {
   rewrite  ^.+api/?(.*)$ /$1 break;
   include  uwsgi_params;
   proxy_pass   https://www.xxxxx.cn:444; #此处修改为自己的请求地址
}
###两处api为本地开发时，在config/index.js中的proxyTable: {}配置的请求代理
###根据具体情况修改

2、记得重启Nginx服务，使修改生效

seayehin
关注
  • 0
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解vue-cli项目开发/生产环境代理实现跨域请求
01-19
开发环境中跨域 使用vue-cli创建的项目，开发地址是localhost:8080，需要访问非本机上的接口http://192.168.0.112:8080/cms/queryMaterial。不同域名之间的访问，需要跨域才能正确请求。跨域的方法很多，通常都需要后台配置，不过vue-cli创建的项目，可以直接利用node.js代理服务器，通过修改vue proxyTable接口实现跨域请求。在vue-cli项目中的config文件夹下的index.js配置文件中，修改前的dev： dev: { assetsSubDirectory: 'static', //静态资源根目录的子目录sta
vue使用代理如何部署在Windows中nginx（nginx配置反向代理）
哦哦一人
11-18 746
#user nobody; worker_processes 1; events { worker_connections 1024; } http { include mime.types; default_type application/octet-stream; sendfile on; keepalive_timeout 65; server { listen 8088; .
单机下Vue项目通过Nginx配置反向代理(1)，零基础web前端开发
最新发布
2401_84094506的博客
04-05 999
整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》PDF完整版点击这里免费领取基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！**[外链图片转存中…(img-MAcM9knq-1712319428138)]
Vue项目Post请求跨域问题
javayangyang123的博客
12-14 4823
Vue项目Post请求跨域问题
如何部署vue前端项目到服务器上（nginx处理跨域）
热门推荐
sherry_chan的博客
01-14 6万+
注： 本文选择了nginx做web服务器。 因为在本文vue前端项目中，需要从接口获取数据，可是数据与vue前端项目是在同一ip地址但不同端口号，所以需要跨域读取数据。本文的跨域处理是使用了nginx。 环境： 阿里云服务器（ubuntu 64bit） xshellnginx 1.使用xshell登录到阿里云服务器。安装nginx（本文安装到/etc下） cd /etc
vue.js使用代理和使用Nginx来解决跨域问题
rui18300072030的博客
09-22 1万+
使用Nginx 反向代理解决跨域问题（vue.js使用代理去掉vue.js因为跨域而触发的options请求） 我们的项目还是需要node.js作为容器的 一、Windows 下安装Nginx （官网下载稳定版http://nginx.org/en/download.html）二、修改config里的nginx.conf文件的serverserver { listen
vue打包使用Nginx代理解决跨域问题
12-09
vue 在开发环境，涉及跨域，就在本地配置了代理，但是部署到服务器上，就不行了。 解决方法有一下几种 服务器端配置CORS 用nginx反向代理,和访问本地服务器是一样的 可以修改成正式线上的地址，再build 推荐 ...
Vue中跨域及打包部署到nginx跨域设置方法
10-16
主要介绍了Vue中跨域以及打包部署到nginx跨域设置方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
利用Nginx处理Vue开发环境的跨域的方法
01-11
1. 需求 本地测试域名与线上域名相同，以便正确传递 Cookie 和进行 SSO 测试...配置 Nginx 进行对应转发： server { listen 80; listen [::]:80; server_name ${product.xxx.xxx.com}; location /api { proxy_p
Nginx 解决WebApi跨域二次请求以及Vue单页面的问题
01-09
由于项目是前后端分离，API接口与Web前端 部署在不同站点当中，因此在前文当中WebApi Ajax 跨域请求解决方法（CORS实现）使用跨域处理方式处理而不用Jsonp的方式。 但是在一段时间后，发现一个很奇怪的问题，每次...
vue.js使用代理和使用Nginx来解决跨域的问题
11-27
使用Nginx 反向代理解决跨域问题（vue.js使用代理去掉vue.js因为跨域而触发的options请求） 我们的项目还是需要node.js作为容器的 一、Windows 下安装Nginx （官网下载稳定版http://nginx.org/en/download.html） 二...
Vue-CLI3.x 设置反向代理的方法
01-19
最近在项目中使用了Vue CLI 3.0版本，项目中需要设置反向代理解决跨域问题，下面记录一下设置过程。 如何安装vue-cli3呢？ 首先，你要有一个nodejs环境 Node 版本要求 Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 ...
基于Nginx 反向代理获取真实IP的问题详解
01-10
解决该问题，需要在Nginx反向代理配置中添加一些配置信息，目的将客户端的真实IP和域名传递到应用程序中。同时，也要修改获取IP地址的方法。 但是需要注意的是，通过Nginx反向代理后，如果访问IP通过了几层代理，...
vue-cli3配置与跨域处理方法
10-16
1. **Nginx 代理**: 可以通过 Nginx 配置反向代理，将前端和后端都部署在同一域名下，从而规避同源策略。 2. **Vue CLI 3 的 devServer.proxy**：在 `vue.config.js` 中配置 `devServer.proxy`，将 API 请求代理到...
vue-cli配置反向代理解决跨域问题及过程详解
my_csdn2018的博客
09-30 3万+
vue-cli配置反向代理 vue-cli提供了配置反向代理的接口，即设置config/index.js中的proxyTable。配置如下: 组件中调用接口示例（axios） 上述示例请求的地址会被解析为http://moby.xbotech.com/api/login。如果proxyTable中pathRewrite配置为空，则请求的地址被解析为http://moby.xbotec...
nginx代理vue
weixin_38879321的博客
03-21 5203
一、nginx代理vue的意义 vue打包后,因为开发环境设置代理 proxy 的原因, 使得访问打包页面 dist/index.html 请求数据出现跨域。 nginx代理vue的意义在于把开发环境中的代理 proxy: {'/api': ... 的/api, 换成生产环境中的地址。 二、下载nginx nginx官网下载并解压，推荐使用稳定版本（nginx/Windows-1.18.0） 三、vue打包 npm run build // 打包文件 (默认)生成文件夹 dist 四、放入ngi
vue-cli项目开发/生产环境代理实现跨域请求【结合nginx服务器来实现---最简单的方式】【有坑】
weixin_43343144的博客
05-11 3222
参考文档【这个文章是有坑的，下面讲解】：https://www.cnblogs.com/goloving/p/8901189.html 关于Vue.js开发环境跨域和生成环境跨域有一个误区会导致你开发环境跨域成功，而生成环境跨域失败！ 开发环境配置跨域【这个网上一搜大把的资料，很简单】 【务必注意，开发环境配置：这里会把路径开头包含 /api 的全部替换成http://127....
vue项目生产环境跨域
09-14
在Vue项目中，处理生产环境跨域可以有多种方法。下面是一些常见的处理方式： 方法一：配置后端代理 如果后端能够处理跨域请求，可以通过配置后端代理来解决跨域问题。具体步骤如下： 1. 找到项目的配置文件，一般是`vue.config.js`文件。 2. 在该文件中，添加一个`devServer`配置项，并设置`proxy`属性为需要代理的跨域地址。例如： ```javascript module.exports = { devServer: { proxy: { '/api': { target: 'http://example.com', // 跨域地址 changeOrigin: true, pathRewrite: { '^/api': '' // 将请求路径中的/api替换为空 } } } } } ``` 这样，当前端发起请求时，会将以`/api`开头的请求代理到`http://example.com`跨域地址。 方法二：使用JSONP JSONP是一种前端解决跨域问题的方法，它利用了script标签没有跨域限制的特点。具体步骤如下： 1. 在需要处理跨域的页面中引入一个公共方法。例如，在`utils`目录下创建一个`index.js`文件，并在其中定义一个`httpRequest`方法。 2. 在该方法中，创建一个script标签，将跨域地址作为src属性值，并通过回调函数获取到数据。 ```javascript export function httpRequest(url, params, callback) { const script = document.createElement('script'); script.src = url; document.body.appendChild(script); window.callbackFunction = function(data) { callback(data); document.body.removeChild(script); } } ``` 3. 在需要发送跨域请求的地方，调用`httpRequest`方法，并传入跨域地址和回调函数。 方法三：配置Nginx反向代理 如果你的项目使用了Nginx作为服务器，可以通过配置Nginx反向代理来解决跨域问题。具体步骤如下： 1. 找到Nginx的配置文件，一般是`nginx.conf`。 2. 在`http`配置块内，添加一个`server`配置块，并设置`location`为需要处理跨域的地址。 3. 在该`location`配置块内，使用`proxy_pass`指令将请求代理到跨域地址。例如： ``` http { server { location /api { proxy_pass http://example.com; // 跨域地址 } } } ``` 这样，当前端发起以`/api`开头的请求时，Nginx会将请求代理到`http://example.com`跨域地址。 以上是几种常见的处理Vue项目生产环境跨域的方法，你可以根据实际情况选择适合你的方式进行处理。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值