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

正向代理:就是你访问不了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. 在SpringBoot中使用Junit测试

    一:加入依赖 <dependency> <groupId>junit</groupId> <artifactId>junit</artifactI ...

  2. ui-choose|列表选择jQuery美化插件

    ui-choose是一款基于jQuery的列表选择美化插件.ui-choose可用于选项不太多的select.radio.checkbox等,提升用户体验. 使用方法 使用ui-choose列表美化插 ...

  3. python数据类型:列表List和Set

    python数据类型:列表List, Set集合 序列是Python中最基本的数据结构 序列中每个元素都分配一个数字,表示索引 列表的数据项不需要具有相同的类型        列表中的值可以重复并且有 ...

  4. maven项目部署到tomcat中没有classe文件的问题汇总

    1.修改生成的class文件的位置

  5. 四剑客(sed)

    一. sed sed简介: 用Linux环境中的编辑器程序来编辑文本文件.这些编辑器可以让你用简单命令或鼠标单击来轻松地处理文本文件中的文本.但有时候,你会发现需要自动处理文本文件,可你又不想动用全副 ...

  6. [LC] 66. Plus One

    Given a non-empty array of digits representing a non-negative integer, plus one to the integer. The ...

  7. JavaScript深入浅出-闭包

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 function (){ var localVal ...

  8. vue子组件使用自定义事件向父组件传递数据

    使用v-on绑定自定义事件可以让子组件向父组件传递数据,用到了this.$emit(‘自定义的事件名称’,传递给父组件的数据) <!DOCTYPE html> <html lang= ...

  9. Python---10小结

    因一边上班一边自学python,一旦忙起来,python就会放两天,可是2天后之前学的内容就会有点忘记. 今天把python的各种启动方法总结一下; 我的文档路径: ------- 1打开文件所在的c ...

  10. git 学习 3

    远程仓库 添加远程库 GitHub 注册账号并建立 repository,Clone with SSH 1 $ ssh-keygen -t rsa -C "youremail@example ...