vue cli 解决跨域 线上 nginx 反向代理配置
前后分离 axios 接 api 跨域问题如图:
解决办法:
1. npm start 本地开发环境解决:
在webpack配置文件 /config/index.js 里找到 proxyTable 开启代理 changeOrigin:true,
proxyTable: {
'/api':{
target:'http://xx.xx.xx.xx:5568',
changeOrigin:true,
pathRewrite:{
'^/api':'/api'
}
}
},
2. npm run build 把 dist 放线上后解决:
nginx 的 配置文件 xx.conf 的 server {} 里加如下:
location /api/ {
# 把 /api 路径下的请求转发给真正的后端服务器
proxy_pass http://xx.xx.xx.xx:5568; # 把host头传过去,后端服务程序将收到your.domain.name, 否则收到的是localhost:8080
proxy_set_header Host $http_host; # 把cookie中的path部分从/api替换成/service
proxy_cookie_path /api /; # 把cookie的path部分从localhost:8080替换成your.domain.name
proxy_cookie_domain localhost:80 http://xx.xx.xx.xx:5568;
}
重新启动一下 nginx
/etc/init.d/nginx reload
api 跨域 访问成功
vue cli 解决跨域 线上 nginx 反向代理配置的更多相关文章
- 前端跨域调请求 nginx反向代理
用 本地pc的目录,请求192.168.3.246的接口,以/api为标识 运行命令: 启动 nginx -s start 重启 nginx -s relaod 停止 nginx -s stop 查看 ...
- nginx高性能WEB服务器系列之五--实战项目线上nginx多站点配置
nginx系列友情链接:nginx高性能WEB服务器系列之一简介及安装https://www.cnblogs.com/maxtgood/p/9597596.htmlnginx高性能WEB服务器系列之二 ...
- nginx反向代理配置及优化
nginx反向代理配置及优化前言: 由于服务器apache抗不住目前的并发.加上前端squid配置后,问题依然无法解决.而页面程序大部分是动态.无法使用fastcgi来处理.因此想使用nginx做为反 ...
- nginx反向代理配置实例分享
nginx反向代理配置一例. 配置内容如下: user www www; worker_processes 8; error_log /usr/local/webserver/nginx/logs/n ...
- Vue Nginx反向代理配置 解决生产环境跨域
Vue本地代理举例: module.exports = { publicPath: './', devServer: { proxy: { '/api': { target: 'https://mov ...
- vue.js 解决跨域问题
我们调试vue.js代码的时候一般都用chrome, 下载插件 进入chrome应用商店 搜索 重启chrome就可以解决跨域问题
- vue中解决跨域问题
方法1.后台更改header header('Access-Control-Allow-Origin:*');//允许所有来源访问 header('Access-Control-Allow-Metho ...
- vue脚手架解决跨域问题-------配置反向代理
1.打开config/index.js 2.在dev配置对象中找到proxyTable:{} 3.添加如下配置 // 配置反向代理,解决跨域请求 proxyTable: { '/api': { tar ...
- 解决异地服务器接口访问跨域,node构建反向代理
跨域对于前端来说是一个老大难的问题,许多方法如jsonp.document.domain + iframe...都有或多或少的问题,一个最佳实践就是通过服务器nginx做反向代理,但奈何不懂相关知识, ...
随机推荐
- Codeforces | CF1000B 【Light It Up】
蒟蒻第二篇题解... 比赛的时候写这道题MLE了qwq..根据CF的赛制我也没敢再交第二次.. 简单讲一下思路好了(假装是dalao)..根据题意要加一个或者不加新的点..如果加一个新的点意味着从这个 ...
- [luogu2617][bzoj1901][Zju2112]Dynamic Rankings【树套树+树状数组+主席树】
题目网址 [传送门] 题目大意 请你设计一个数据结构,支持单点修改,区间查询排名k. 感想(以下省略脏话inf个字) 真的强力吹爆洛谷数据,一般的树套树还给我T了一般的点,加强的待修主席树还给我卡了几 ...
- Jarvis OJ [XMAN]level1 write up
首先 老规矩,把软件拖到Ubuntu里checksec一下文件 然后知道了软件位数就放到IDA32里面... 熟悉的函数名... 缘真的妙不可言... 然后看了下vulnerable_function ...
- codeforces #530 D(Sum in the tree) (树上贪心)
Mitya has a rooted tree with nn vertices indexed from 11 to nn, where the root has index 11. Each ve ...
- 牛客小白月赛6C-桃花(DFS/BFS求树的直径)
链接:https://www.nowcoder.com/acm/contest/136/C 来源:牛客网 桃花 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 262144K,其他语言 ...
- 群福利:Redis云服务器免费领取(附Redis安装和连接远程连接Redis案例)
Redis安装:在线体验:https://try.redis.io Ubuntu:sudo apt-get install redis CentOS:yum install redis (root权限 ...
- Ubuntu下redis数据库的安装和配置详细过程
Redis 安装 当前redis最新稳定版本是4.0.9 当前ubuntu虚拟机中已经安装好了redis,以下步骤可以跳过 最新稳定版本下载链接:http://download.redis.io/re ...
- linux复制文件到一个不存在的文件夹
复制文件到一个不存在的文件夹时,会报错 cp -f aaa /home/admin/.m2/cp: 无法创建普通文件"/home/admin/.m2/": 是一个目录 解决的方式: ...
- mybatis的0和null
<if test="type!=null and type!=''">这样判断会把0也当做null的 另外写一个条件判断0 <if test="type ...
- HDU 5965 扫雷
扫雷游戏是晨晨和小璐特别喜欢的智力游戏,她俩最近沉迷其中无法自拔. 该游戏的界面是一个矩阵,矩阵中有些格子中有一个地雷,其余格子中没有地雷. 游戏中,格子可能处于己知和未知的状态.如果一个己知的格子中 ...