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

正向代理:就是你访问不了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. CHI 2013:人机交互领域那些令人兴奋的新技术

    2013:人机交互领域那些令人兴奋的新技术" title="CHI 2013:人机交互领域那些令人兴奋的新技术"> 编者按:CHI是人机交互领域首屈一指的国际盛会, ...

  2. 吴裕雄--天生自然python学习笔记:pandas模块DataFrame 数据的修改及排序

    import pandas as pd datas = [[65,92,78,83,70], [90,72,76,93,56], [81,85,91,89,77], [79,53,47,94,80]] ...

  3. OpenCVSharp介绍

    OpenCvSharp 是一个OpenCV的.Net wrapper,应用最新的OpenCV库开发,使用习惯比EmguCV更接近原始的OpenCV,有详细的使用样例供参考.该库采用LGPL发行,对商业 ...

  4. commonhelper 通用类:计时器、数组去重、自动生成日志编号、生成随机数、处理字符串

    using System;using System.Collections.Generic;using System.Diagnostics;using System.Text; namespace ...

  5. 使用yum仅下载不安装

    安装工具 yum install yum-utils yum install yum-plugin-downloadonly yum install yumdownloadonlyyum instal ...

  6. FileZilla相关配置说明

    相关下载可以直接到官网,或者阿里云帮助:https://help.aliyun.com/knowledge_detail/36243.html?spm=5176.10695662.1996646101 ...

  7. 吴裕雄--天生自然HTML学习笔记:HTML 样式- CSS

    CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式. <!DOCTYPE html> <html> <head> <me ...

  8. (四)mybatis缓存、事务、插件的基本知识

    mybatis缓存.事务.插件的基础 一.缓存 (一)一级缓存与二级缓存 一级缓存 为了获得更好的性能,最重要的就是一级缓存.每个session对象维持一个一级缓存,session对象创建时缓存创建, ...

  9. Python---6条件判断与循环

    条件判断 计算机之所以能做很多自动化的任务,因为它可以自己做条件判断. 比如,输入用户年龄,根据年龄打印不同的内容,在Python程序中,用if语句实现: age = 20 if age >= ...

  10. Android 一个3D相册源码

    我们专业课有Android的学习,最后老师让做一个简单的Android应用程序.我在网上找些资料,加上自己改造一下做了一个3D相册. 程序仿照Android的相册功能,调用Gallery类对相片进行浏 ...