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做反向代理,但奈何不懂相关知识, ...
随机推荐
- luogu4145 上帝造题的七分钟2 (线段树)
题意:给一个数列,维护两个操作,区间开根号.询问区间和 注意到1e12开根号六次后就变成1,而且根号1等于1 也就是说,就算我们用单点修改,只要跳过1,那么修改的次数最多也就是6n 那么维护一个区间最 ...
- LOJ#6278. 数列分块入门 2
在一个区间上进行操作,一种操作是某个小区间都加上c,另一个查找这个区间内大于c*c的数 我们可以另外开一个数组在保存a中的每个分块内的相对值,然后每次对a加值,并把a的值赋给b,不同的是b内的各个分块 ...
- angular与vue的应用对比
因为各种笔试面试,最近都没时间做一些值得分享的东西,正好复习一下vue技术栈,与angular做一下对比. angular1就跟vue比略low了. 1.数据绑定 ng1 ng-bind,{{ sco ...
- 第一次有人把5G讲的这么简单明了
第一次有人把5G讲的这么简单明了 鲜枣课堂 纯洁的微笑 今天 关于5G通信,常见的文章都讲的晦涩难懂,不忍往下看,特转载一篇,用大白话实现5G入门. 简单说,5G就是第五代通信技术,主要特点是波长为毫 ...
- BZOJ3881 Divljak
解:对被包含的那些串建AC自动机. 每次加一个串,就在AC自动机上面跑,可知能够跑到一些节点. 这些节点都是一些前缀的形式,我们跳fail树就是跳后缀,这样就能够得到所有能匹配的子串. 我们分别对AC ...
- Python之迭代器,生成器
迭代器 1.什么是可迭代对象 字符串.列表.元组.字典.集合都可以被for循环,说明他们都是可迭代的. from collections import Iterable l = [1,2,3,4] t ...
- Failed to read HTTP message: org.springframework.http.converter.HttpMessageNotReadableException: Required request body is missing: public xxxxxxxx.
最近在使用 springBoot开发的时候, 使用PostMan访问接口, 返回一个 404 , 后台报一个 warn : Failed to read HTTP message: org.spr ...
- Day20--Python--约束和异常处理
1. 异常处理(处理异常,抛出异常,自定义异常) 异常: 程序运行过程中产生的错误 1. 产生异常. raise 异常类(), 抛出异常 2. 处理异常: try: xxxxxxxx # 尝试执行的代 ...
- ajax基础知识
一个简单的ajax例子: Uncaught SyntaxError: Unexpected token input看看是否是漏了:或者函数没有() //更新单个简历完整度 function updat ...
- Good Bye 2018 D. New Year and the Permutation Concatenation
传送门 https://www.cnblogs.com/violet-acmer/p/10201535.html 题意: 求 n 的所有全排列组成的序列中连续的 n 个数加和为 n*(n+1)/2 的 ...