vue cli 解决跨域 线上 nginx 反向代理配置
时间:2019-03-19
本文章向大家介绍vue cli 解决跨域 线上 nginx 反向代理配置,主要包括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 跨域 访问成功
- Pandas-DataFrame基础知识点总结
- python mongodb爬取58网站
- 洛谷P1143 进制转换
- python爬取链家租房之获取北京所有区的网站分栏地址(第一次写,code太粗犷,欢迎提建议)
- Pandas-Series知识点总结
- Numpy基础知识点汇总
- P3388 【模板】割点(割顶)
- python爬取链家租房之获取房屋的链接和页面的详细信息
- 信用卡“坏账”客户分析(一)
- 一道简单的sql语句题
- python爬虫反爬取---设置User Agent自动变换header文件
- 一文读懂Python多线程
- 深入理解Python变量作用域与函数闭包
- TensorFlow从1到2 - 5 - 非专家莫入!TensorFlow实现CNN
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 数据结构算法操作试题(C++/Python)——删除链表的倒数第N个节点
- Day 7:斐波那契数列
- Day8 :跳台阶
- Linux Signal 一网打尽
- Day9 :变态跳台阶
- Day10 :矩形覆盖
- vue3.0新特性初体验(二)
- 数据结构算法操作试题(C++/Python)——有效的括号
- 数据结构算法操作试题(C++/Python)——合并两个有序链表
- Day11 :二进制中1的个数
- 数据结构算法操作试题(C++/Python)——括号生成
- 数据结构算法操作试题(C++/Python)——合并K个排序链表
- 数据结构算法操作试题(C++/Python)——删除排序数组中的重复项
- 数据结构算法操作试题(C++/Python)——k个一组翻转链表
- 数据结构算法操作试题(C++/Python)——移除元素