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 ...
随机推荐
- 小程序开发第一天josn和wxml
视频中只有app.josn路径还有wxm文本.js中没有调用page.原视频中是可以出来文本内容的. 但是把js调用page以后是可以呈现的 所以疑问点就是为什么以前可以? 1.微信开发工具改了,强制 ...
- 【电脑】xshell报:需要Xmanager软件来处理X11转发请求
https://www.netsarang.com/zh/xmanager/ 下载了就好了 我的图片出不来,下了就好了.
- Mybatis「MySQL-Oracle」 中主键自动生成 <selectKey> 序列化
有时候我们不仅仅是通过返回 int 影响行数来确定数据是否插入成功就行了,因为我们总是会用到这个刚刚插入的自增主键,比如主子表入库,子表需要主表的 id,那这个时候我们再去数据库查就显得有点 low ...
- P2827 蚯蚓
目录 题目链接 思路 代码 题目链接 咕咕咕 思路 如果是\(q=0\)的话,相当于维护一个集合,支持查询最大值,删除最大值,添加新值,用\(set\)即可实现 如果是\(q>0\)的话,我们可 ...
- PATB1048数字加密
关于代码都是可以在PAT上跑通的 自己是在VS2017上写的,所以会有语句system("pause");,表示暂定方便查看结果. *在一个是VS2017中使用scanf会报错,所 ...
- 《深度学习框架PyTorch:入门与实践》读书笔记
https://github.com/chenyuntc/pytorch-book Chapter2 :PyTorch快速入门 + Chapter3: Tensor和Autograd + Chapte ...
- 识别led灯和驱动器的关联关系
精准答案: https://wenku.baidu.com/view/db1f7361ac02de80d4d8d15abe23482fb4da02d6.html?qq-pf-to=pcqq.group ...
- caffe解析
Caffe支持CUDA,Caffe和TensorFlow没有给出分布式的版本, 可以使用多gpu,Caffe通过直接在执行指令后面加上-gpu 0,1
- 冰多多团队Gamma阶段项目展示
[冰多多]Gamma项目展示 冰多多项目: 语音coding助手 Gamma阶段目标: 推出一个更加完整的IDE,完善编辑器功能,优化UI 一. 团队成员的简介和个人博客地址 成员 角色 个人博客地址 ...
- CentOS 7搭建本地yum源和局域网yum源
这两天在部署公司的测试环境,在安装各种中间件的时候,发现各种依赖都没有:后来一检查,发现安装的操作系统是CentOS Mini版,好吧,我认了:为了完成测试环境的搭建,我就搭建了一个局域网的yum源. ...