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

正向代理:就是你访问不了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. 2013 ACM网络搜索与数据挖掘国际会议

    ACM网络搜索与数据挖掘国际会议" title="2013 ACM网络搜索与数据挖掘国际会议"> 编者按:ACM网络搜索与数据挖掘国际会议(6th ACM Conf ...

  2. 结构体struct,类class

    1.struct,值类型,结构体会自动生成初始化方法,class是引用类型 struct Person { var name : String var age : Int func simpleDes ...

  3. sqlserver 查询各个学生语文、数学、英语、历史课程成绩

    -- 建表 插入数据 USE 你自己的数据库; CREATE TABLE Member( MID ) PRIMARY KEY, MName ) ); CREATE TABLE Course( FID ...

  4. Oralce获取32位随机数

    SELECT SYS_GUID() from dual;

  5. mycat(读写分离、负载均衡、主从切换)

    博主本人平和谦逊,热爱学习,读者阅读过程中发现错误的地方,请帮忙指出,感激不尽 1.环境准备 1.1新增两台虚拟机 mycat01:192.168.247.81 mycat02:192.168.247 ...

  6. 转载-WebSocket协议解析

    现在,很多网站为了实现推送技术,所用的技术都是轮询.轮询是指在特定的时间间隔(如每一秒),由浏览器对服务器发起HTTP请求,然后由服务器返回数据给浏览器.由于HTTP协议是惰性的,只有客户端发起请求, ...

  7. 项目中spring容器加载的问题

    今天做一个项目采用的是传统架构,没有采用分布式,部署时出现了异常,信息是: org.springframework.beans.factory.NoSuchBeanDefinitionExceptio ...

  8. CF-1117C-Magic Ship

    二分 C - Magic Ship GNU C++11 Accepted 31 ms 1700 KB #include "bits/stdc++.h" using namespac ...

  9. Linux(CentOS_7.6)安装Nginx

    1.安装依赖 12 yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel 2.下载Nginx并解压 1234567 c ...

  10. stm32 flash 存储

    转载自: http://bbs.elecfans.com/jishu_388272_1_1.html 说到STM32的FLSAH,我们的第一反应是用来装程序的,实际上,STM32的片内FLASH不仅用 ...