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

Vue本地代理举例：

module.exports = {publicPath: './',devServer: {proxy: {'/api': {target: 'https://movie.douban.com',ws: true,changeOrigin: true,pathRewrite: {'^/api': ''}},'/bpi': {target: 'https://cdnopenapialifc.agaege.com/',ws: true,changeOrigin: true,pathRewrite: {'^/bpi': ''}}}},pwa: {iconPaths: {favicon32: 'favicon.ico',favicon16: 'favicon.ico',appleTouchIcon: 'favicon.ico',maskIcon: 'favicon.ico',msTileImage: 'favicon.ico'}}
}

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

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

location /api {rewrite  ^.+api/?(.*)$ /$1 break; //可选参数，正则验证地址include  uwsgi_params; //可选参数，uwsgi是服务器和服务端应用程序的通信协议，规定了怎么把请求转发给应用程序和返回proxy_pass   https://www.xxxxx.cn:444; #此处修改为自己的请求地址，必填
}
###api为本地开发时，在config/index.js中的proxyTable: {}配置的请求代理
###根据具体情况修改

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

举例：

location /api {
rewrite ^.+api/?(.*)$ /$1 break;
include uwsgi_params;
proxy_pass https://movie.douban.com;
}location /bpi {
rewrite ^.+bpi/?(.*)$ /$1 break;
include uwsgi_params;
proxy_pass https://cdnopenapialifc.agaege.com/;
}

转载于:https://www.cnblogs.com/zhaohongcheng/p/11250161.html

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

nginx反向代理配置解决不同域名默认页面不同问题
nginx反向代理配置解决不同域名默认页面不同问题背景设计思路步骤背景需求:使用同一个项目(http://localhost:8080/thzhdj)映射两个域名(test1.com,tes ...
Vue代理解决生产环境跨域问题
当我们前端要调用跨域接口时,我们需要用代理解决跨域问题,比如Vue的代理配置proxy,但是当Vue项目打包成静态文件时,他的代理也就失灵了,因为代理的前提是本地必须有service,本章讲一下生产环 ...
Vue代理解决生产环境跨域问题部署必备干货
当我们前端要调用跨域接口时,我们需要用代理解决跨域问题,比如Vue的代理配置proxy,但是当Vue项目打包成静态文件时,他的代理也就失灵了,因为代理的前提是本地必须有service,本章讲一下生产环 ...
微服务架构（5）：nginx反向代理cors解决跨域
微服务架构(5):nginx反向代理&&cors解决跨域学习目标 1.使用域名访问本地项目 1.1.统一环境 1.2.域名解析 1.3.解决域名解析问题 1.4.nginx解决端口问 ...
LNMP详解（七）——Nginx反向代理配置实战
今天继续给大家介绍Linux运维的相关知识,本文主要内容是Nginx反向代理配置实战. 一.系统架构简介在生产环境中,我们有时需要使用Nginx做反向代理功能,其架构如下所示: 在上图中,所有的外界 ...
nginx反向代理配置及优化
原创作品,允许转载,转载时请务必以超链接形式标明文章原始出处 .作者信息和本声明.否则将追究法律责任.http://liuyu.blog.51cto.com/183345/166381 nginx反 ...
Nginx反向代理配置详解
Nginx反向代理配置详解 Nginx简单的反向代理配置,包括配置文件中各项参数的的注释,好了,开始! 开始首先安装Nginx 一.建立用户和用户组 1 2 ./usr/sbin/groupadd w ...
nginx反向代理配置实例分享
nginx反向代理配置一例. 配置内容如下: user www www; worker_processes 8; error_log /usr/local/webserver/nginx/logs/n ...
linux nginx反向代理配置
linux nginx反向代理配置 location ^~/api/ {proxy_pass http://192.168.1.50:82/; }

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

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

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

最新文章

热门文章

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

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

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

最新文章

热门文章

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

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