提到代理,分为:正向代理和反向代理。

正向代理:就是你访问不了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反向代理的更多相关文章

  1. 最简单实现跨域的方法:用 Nginx 反向代理

    本文作者: 伯乐在线 - 良少 .未经作者许可,禁止转载!欢迎加入伯乐在线 专栏作者. 什么是跨域 跨域,指的是浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器对javascrip ...

  2. [转] 最简单实现跨域的方法:使用nginx反向代理

    [From] http://blog.jobbole.com/90975/ 什么是跨域 跨域,指的是浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全 ...

  3. web添加第三方应用,前端解决跨域问题的8种方案

    应用场景 web应用通过QQ登录授权实现第三方登录. 操作步骤 1. 注册成为QQ互联平台开发者,http://connect.qq.com/ 2. 准备一个可访问的域名,如dev.foo.com 3 ...

  4. [转] js前端解决跨域问题的8种方案(最新最全)

    1.同源策略如下: URL 说明 是否允许通信 http://www.a.com/a.jshttp://www.a.com/b.js 同一域名下 允许 http://www.a.com/lab/a.j ...

  5. 004. 前端跨域资源请求: JSONP/CORS/反向代理

    1.什么是跨域资源请求? https://www.cnblogs.com/niuli1987/p/10252214.html 同源: 如果两个页面的协议,端口(如果有指定)和域名都相同,则两个页面具有 ...

  6. Nginx反向代理、CORS、JSONP等跨域请求解决方法总结

    由于 Javascript 同源策略的存在使得一个源中加载来自其它源中资源的行为受到了限制.即会出现跨域请求禁止. 通俗一点说就是如果存在协议.域名.端口或者子域名不同服务端,或一者为IP地址,一者为 ...

  7. 搞懂:前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理

    什么是跨域 跨域:一个域下的文档或脚本试图去请求另一个域下的资源 广义的跨域包含一下内容: 1.资源跳转(链接跳转,重定向跳转,表单提交) 2.资源请求(内部的引用,脚本script,图片img,fr ...

  8. AJAX跨域问题解决方法(4)——调用方解决跨域

    调用方解决跨域的方法只有一种,那就是隐藏跨域. 何为隐藏跨域? 隐藏跨域的核心思路是通过反向代理隐藏跨域以欺骗浏览器 什么是反向代理?反向代理是指通过中间服务器使得访问同一个域名的两个不同url最终会 ...

  9. vue-router有哪几种导航钩子 keep-alive的详细用法 解决跨域

                1===>vue-router有哪几种导航钩子?        第一种:是全局导航钩子:router.beforeEach(to,from,next)        第二 ...

随机推荐

  1. python开发常见应用第一卷(OS遍历文件并存储文件路径到数据库)

    之前我们爬取完指定网站的图片后,会将它门保存到服务器或本地的数据库中,真正的工作中大多数是采用分布式的方式来爬取的,所以这些图片会分布在很多的主机上面,当被引用时需要根据IP+图片路径来引用并且加载, ...

  2. MySQL数据库简单操作

    title date tags layout MySQL简单操作 2018-07-16 Linux post 登录mysql mysql -h 主机名 -u 用户名 -p 查看所有数据库 show d ...

  3. idea,2018版破解方法

    1.准备安装文件 2.安装 ideaIU-2018.3.5.exe ,如这里是安装到IDEA这个文件夹: 3.复制JetbrainsIdesCrack-4.2-releasexxx.jar放到IDEA ...

  4. mongodb 前人埋坑的奇怪问题

    接手一个很老的项目 数据库用的mongodb 代码里的collections表名用的auth没问题 直接去monogdb show table 确实有auth表 想在本地登录,看看用户信息 > ...

  5. Oracle中实现sql查询得到连续号码段

    一.表名为t的表中数据如下: select * from t; FPHM KSHM ---------- ---------- 实现代码如下: select b.fphm,min(b.kshm),ma ...

  6. 安装oracle 11g 客户端,检查过程中报物理内存不足的解决

    今早接到同事电话,说安装oracle 11g客户端的时候,在检查先决条件的时候,报错,说内存不足,但是本机的内存是2G,肯定够用:如图: 找了一圈,原来Oracle执行先决条件检查是依赖c$共享,很多 ...

  7. Java包装类之实体类不要使用基本类型

    [color=rgba(0, 0, 0, 0.75)]今天来记录一下,在项目中因为基本类型,所产生的bug.**U•ェ•*U** 包装类:8种基本类型的包装类 应用场景:数据库建立实体映射多用包装类 ...

  8. 与项目欧拉速度比较:C vs Python与Erlang vs Haskell

    我从问题#12 ProjectEuler作为编程练习,并比较我在C,Python,Erlang和Haskell中的实现(当然不是最优)实现.为了获得更高的执行时间,我搜索了第一个有1000个以上因子的 ...

  9. 前端自动化构建工具gulp

    1.gulp的安装 首先确保你已经正确安装了nodejs环境.然后以全局方式安装gulp: npm install -g gulp 全局安装gulp后,还需要在每个要使用gulp的项目中都单独安装一次 ...

  10. NBA球星的生意经 个人流量化之路

    个人流量化之路" title="NBA球星的生意经 个人流量化之路"> 在国人欢天喜地的庆祝新春佳节之时,大洋彼岸也在进行着让全球篮球迷为之"着魔&quo ...