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/;
}
Vue Nginx反向代理配置 解决生产环境跨域的更多相关文章
- nginx反向代理实现前后端分离&跨域问题
1.代理和跨域 1.1 正向代理 1)用户希望代理服务器帮助其和要访问服务器之间实现通信,需要: a.用户IP报文的目的IP=代理服务器IP: b.用户报文端口号=代理服务器监听端口号: c.HTTP ...
- Nginx入门及如何反向代理解决生产环境跨域问题
1.Nginx入门与基本操作篇 注:由于服务器是windows系统,所以本文主要讲解Nginx在windows下的操作. 首先下载Nginx 解压缩,我们所有的配置基本都在万能的 nginx/conf ...
- nginx反向代理配置及优化
nginx反向代理配置及优化前言: 由于服务器apache抗不住目前的并发.加上前端squid配置后,问题依然无法解决.而页面程序大部分是动态.无法使用fastcgi来处理.因此想使用nginx做为反 ...
- nginx反向代理配置实例分享
nginx反向代理配置一例. 配置内容如下: user www www; worker_processes 8; error_log /usr/local/webserver/nginx/logs/n ...
- Nginx配置解决NetCore的跨域
使用Nginx配置解决NetCore的跨域 废话不多说,直接上Nginx配置 server { listen 80; server_name 你的Id或域名; location / { add_hea ...
- 使用python自动生成docker nginx反向代理配置
由于在测试环境上用docker部署了多个应用,而且他们的端口有的相同,有的又不相同,数量也比较多,在使用jenkins发版本的时候,不好配置,于是想要写一个脚本,能在docker 容器创建.停止的时候 ...
- Nginx反向代理配置可跨域
由于业务需要,同一项目中的前端代码放在静态环境中,而后端代码放在tomcat中,但此时问题却出现了:前端使用ajax请求后端获取数据时出现如下报错 XMLHttpRequest cannot load ...
- vue-cli 3.0 axios 跨域请求代理配置及生产环境 baseUrl 配置
1. 开发环境跨域配置 在 vue.config.js 文件中: module.exports = { runtimeCompiler: true, publicPath: '/', // 设置打包文 ...
- nginx 反向代理配置示例
Nginx反向代理在生产环境中使用很多的. 场景1: 域名没有备案,可以把域名解析到香港一台云主机上,在香港云主机做个代理,而网站数据是在大陆的服务器上. server { listen ; serv ...
随机推荐
- java.lang.IllegalArgumentException: Invalid character found in the request target. The valid charact
线上环境中部署的 Tomcat 项目,出现部分页面无法打开的情况,但本地环境是好的.经过排查发现,本地 Tomcat版本为 7.0.77,而线上版本为 7.0.88.报错的具体描述为java.lang ...
- Java XML文档
概念 XML(EXtensible Markup Language),可扩展标记语言.可扩展就是<>内的东西可以自己定义,可以随便写.标记语言就是加了<>符号的 .HTML是超 ...
- struts2学习1
struts2使用优势 自动封装参数 参数校验 结果的处理(转发|重定向) 国际化 显示等待页面 表单的防止重复提交 struts2具有更加先进的架构以及思想 使用拦截器 struts2的历史 str ...
- ABP 报错 System.InvalidOperationException: 实例失败。
错误:System.InvalidOperationException: 实例失败. 解决:数据库链接写错了,斜杠的问题 core:两根斜杠 .net framework:一根斜杠 core的写法: ...
- [RN] React Native 使用 阿里 ant-design
React Native 使用 阿里 ant-design 实例效果如图: 一.安装 npm install antd-mobile-rn --save npm install babel-plugi ...
- Intellij Idea 星云常用配置工具箱
1. 软件配置篇 1.1 关闭默认打开最近的工程选项 1.2. 修改快捷键 1.3 修改字体 1.4 创建类模板 效果如下: 1.5 创建接口模板 效果同上 2. 插件篇 1.1 省略Getter a ...
- Set学习笔记
今天又去看了一下STL里的set,来这里水一下博客 What is set? set的本质是一种功能受限的平衡树,不支持重复数字,也就是说如果插入一大堆数字12,输出它的长度还是1 如何定义 定义 s ...
- ZROI 暑期高端峰会 A班 Day6 离线问题
FBI Warning:本文含有大量人类本质之一. 动态联通问题 允许离线. 模板,不讲了. 归并排序 %@)(#&%)++%($@)%!#(&%)(&@))) 主定理 U^( ...
- 2018-2019-2 20165313 《网络对抗技术》 Exp 8 Web基础
一.实践要求: (1).Web前端HTML(0.5分) 能正常安装.启停Apache.理解HTML,理解表单,理解GET与POST方法,编写一个含有表单的HTML. (2).Web前端javascip ...
- centos7 df 命令卡死
登录服务器想查看磁盘使用情况,使用了df,但卡住半天没有响应. 运行strace df -h,发现最后卡在了 stat("/proc/sys/fs/binfmt_misc", 无法 ...