前端解决跨域问题的终极武器——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) 第二 ...
随机推荐
- python之接口自动化测试框架
梳理python+unittest接口自动化测试框架的思路: 1.确定目录: cases:存放测试用例的py文件:config:存放一些数据库,环境地址等固定不变的信息: core:核心的文件, ca ...
- HBase单机安装及Phoenix JDBC连接
HBase是建立在Hadoop文件系统之上的分布式面向列的数据库,它是横向扩展的.它利用了Hadoop的文件系统(HDFS)提供的容错能力. HBase提供对数据的随机实时读/写访问,可以直接HBas ...
- ckeditor深入挖掘吃透
- 【Linux_Shell 脚本编程学习笔记一、条件表达式】
条件表达式返回的结果都为布尔型 真为1,假为0 条件测试的表达式 [expression] 比较符 整数比较 -eq:比较两个整数是否相等,$A -eq $B -ne:测试两个整数是否不等,不等则为真 ...
- hibernate主键(generator)生成方式
1) assigned 主键由外部程序负责生成,无需Hibernate参与. 2) hilo 通过hi/lo 算法实现的主键生成机制,需要额外的数据库表保存主键生成历史状态. 3) seqhilo 与 ...
- Navicat远程连接服务器Mysql
使用NAVICAT远程访问MYSQL的步骤 1.修改远程访问权限 //进入MySQL服务器或使用其它工具 xxxx@ubuntu:/$ mysql -h localhost -u root -p xx ...
- 吴裕雄--天生自然 R语言开发学习:方差分析(续二)
#-------------------------------------------------------------------# # R in Action (2nd ed): Chapte ...
- bzoj1432_[ZJOI2009]Function
题目描述 有n 个连续函数fi (x),其中1 ≤ i ≤ n.对于任何两个函数fi (x) 和fj (x),(i != j),恰好存在一个x 使得fi (x) = fj (x),并且存在无穷多的x ...
- 添加找回鼠标右键新建菜单里的新建office2003/2007/2010文档的简洁方法
鼠标右键新建菜单里的新建office文档丢失了怎么办?我们可以通过一些优化设置软件如优化大师来定制,但更简单的方法是只需要导入相应的注册表设置就行了. 下面即在鼠标右键新建菜单里添加新建office2 ...
- legend图例
import matplotlib.pyplot as plt import numpy as np x=np.linspace(-3,3,50) y1=x*2+1 y2=x**2 plt.plot( ...