前端解决跨域问题的终极武器——Nginx反向代理
提到代理,分为:正向代理和反向代理。
正向代理:就是你访问不了Google,但是国外有个VPN可以访问Google,你访问VPN后叫它访问Google,然后把数据传给你。
正向代理隐藏了真实的客户端。
反向代理:你访问baidu.com,后面有成千上万台服务器,具体访问哪一台,你不知道,只需要知道反向代理器是谁,让它帮你去请求真实的数据服务器,然后把数据返回给你。
反向代理隐藏了真实的服务端。


Nginx是一个web服务器,可以做反向代理,负载均衡器,HTTP缓存。前端开发一般用Nginx解决跨域问题:
举个栗子:本地前端页面是是http://localhost:8080,而请求的服务器是http://192.168.10.1:8080
Nginx或者Apache上面的配置代理:将服务器的ip映射成别的相对路径。
http {
server {
listen 80;
location /{
proxy_pass http://localhost:8080;
}
location /api{
proxy_pass http://192.168.10.1:8080;
}
}
}
Nginx运行在localhost:8080 上,将服务器ip:http://192.168.10.1:8080映射成了api,当调用api路径时,就不像是在跨域了而是在访问本地(http://localhost:8080) ,实际上是在访问服务器(http://192.168.10.1:8080)。
Nginx解决跨域问题通过Nginx反向代理将对真实服务器的请求转移到本机服务器来避免浏览器的"同源策略限制"。
前端遇到跨域问题,要么让后台通过配置Access-Control-Allow-Origin参数来解决,要么自己本地起个Nginx反向代理进行跨域设置。
【完】
学会素读,学会素听,交流的前提是必须知道别人完整的东西,否则学习到的东西很少了。
前端解决跨域问题的终极武器——Nginx反向代理的更多相关文章
- 最简单实现跨域的方法:用 Nginx 反向代理
本文作者: 伯乐在线 - 良少 .未经作者许可,禁止转载!欢迎加入伯乐在线 专栏作者. 什么是跨域 跨域,指的是浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器对javascrip ...
- [转] 最简单实现跨域的方法:使用nginx反向代理
[From] http://blog.jobbole.com/90975/ 什么是跨域 跨域,指的是浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全 ...
- web添加第三方应用,前端解决跨域问题的8种方案
应用场景 web应用通过QQ登录授权实现第三方登录. 操作步骤 1. 注册成为QQ互联平台开发者,http://connect.qq.com/ 2. 准备一个可访问的域名,如dev.foo.com 3 ...
- [转] js前端解决跨域问题的8种方案(最新最全)
1.同源策略如下: URL 说明 是否允许通信 http://www.a.com/a.jshttp://www.a.com/b.js 同一域名下 允许 http://www.a.com/lab/a.j ...
- 004. 前端跨域资源请求: JSONP/CORS/反向代理
1.什么是跨域资源请求? https://www.cnblogs.com/niuli1987/p/10252214.html 同源: 如果两个页面的协议,端口(如果有指定)和域名都相同,则两个页面具有 ...
- Nginx反向代理、CORS、JSONP等跨域请求解决方法总结
由于 Javascript 同源策略的存在使得一个源中加载来自其它源中资源的行为受到了限制.即会出现跨域请求禁止. 通俗一点说就是如果存在协议.域名.端口或者子域名不同服务端,或一者为IP地址,一者为 ...
- 搞懂:前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理
什么是跨域 跨域:一个域下的文档或脚本试图去请求另一个域下的资源 广义的跨域包含一下内容: 1.资源跳转(链接跳转,重定向跳转,表单提交) 2.资源请求(内部的引用,脚本script,图片img,fr ...
- AJAX跨域问题解决方法(4)——调用方解决跨域
调用方解决跨域的方法只有一种,那就是隐藏跨域. 何为隐藏跨域? 隐藏跨域的核心思路是通过反向代理隐藏跨域以欺骗浏览器 什么是反向代理?反向代理是指通过中间服务器使得访问同一个域名的两个不同url最终会 ...
- vue-router有哪几种导航钩子 keep-alive的详细用法 解决跨域
1===>vue-router有哪几种导航钩子? 第一种:是全局导航钩子:router.beforeEach(to,from,next) 第二 ...
随机推荐
- VS制作dll、def文件的使用、dll加入工程使用
1.VS新建工程,在选项的时候,选择dll和空项目,保持干净的dll库: 创建完以后,添加头文件以及源文件. 2.将外部模块使用的接口导出: (1)函数导出: __declspec(dllexport ...
- 概率DP——BZOJ4008 [HNOI2015]亚瑟王
[HNOI2015]亚瑟王 Description 小 K 不慎被 LL 邪教洗脑了,洗脑程度深到他甚至想要从亚瑟王邪教中脱坑.他决定,在脱坑之前,最后再来打一盘亚瑟王.既然是最后一战,就一定要打得漂 ...
- WAIC | 奇点云携「酷炫AI应用」亮相2019世界人工智能大会
你是否还在疑惑“人工智能可否改变世界?” 那么,你该有一些危机感了. 机器视觉.自然语言处理.智能语音.机器人问诊.智慧驾驶……这些AI技术及应用早已渗入了我们日常生活的点滴. 29日,以「智联世界, ...
- 分辨率与px的关系
此篇文章的目的用于打印套打的位置计算,顺便科普下知识: 1寸=2.54厘米 14寸=355.6毫米 15.6寸=39.624厘米=396.24毫米: 21寸=533.4毫米 21.7寸=551.18毫 ...
- python语法基础-函数-基础-长期维护
############### 函数的定义调用,返回值和返回值接收 ############## def mylen(): s = "myname" i = 0 for ...
- LeetCode Day 5
LeetCode0005 给定一个字符串 s,找到 s 中最长的回文子串.你可以假设 s 的最大长度为 1000. 示例 1: 输入: "babad" 输出: "bab& ...
- mysql数据库常用命令入门
查询所有数据库 show databases; 创建数据库 create database mytest001 default character set utf8; 查看数据库的默认字符集 show ...
- react全家桶从0搭建一个完整的react项目(react-router4、redux、redux-saga)
react全家桶从0到1(最新) 本文从零开始,逐步讲解如何用react全家桶搭建一个完整的react项目.文中针对react.webpack.babel.react-route.redux.redu ...
- 【待填坑】LG_4996_咕咕咕
正解思路和[AHOI]的中国象棋非常相似,同样是利用状态不一定一定要表示出来,利用组合数学递推节省枚举时间.
- 数据库三大范式和反范式 · oldmee
后一个范式都是在满足前一个范式的基础上建立的. 1NF 无重复的列.表中的每一列都是不可分割的基本数据项.不满足1NF的数据库不是关系数据库.如联系人表(姓名,电话),一个联系人有家庭电话和公司电话, ...