精华内容
下载资源
问答
  • nginx跨域原理

    2021-07-28 19:58:00
    跨域原理: 第一步:一个用户访问了静态页面,静态页面访问nginx, 第二步:nginx帮你把请求转给后台, 第三步后台把消息拿到回给nginx,nginx这个时候看他需要不需要跨域,如果跨域,这个问题给它不能用,需要...

    什么是跨域

    从某一个域请求其他域的各类资源,其中只要两个地址的域名、端口以及协议有不同的地方就会视为跨域,跨域资源无法直接获取。

    跨域原理:
             第一步:一个用户访问了静态页面,静态页面访问nginx,
             第二步:nginx帮你把请求转给后台,
             第三步后台把消息拿到回给nginx,nginx这个时候看他需要不需要跨域,如果跨域,这个问题给它不能用,需要解决跨域,所以要返回4个头
             
             nginx代理后台 代理前端 不需要跨域  nginx只代理后台则需要跨域
             
             
           
             解决跨域问题 在nginx里面加入4个头,就能解决跨域问题
    location / {
                    proxy_pass http://localhost:8080/;
                    add_header Access-Control-Allow-Origin *;
                    add_header Access-Control-Allow-Methods *;
                    add_header Access-Control-Allow-Credentials true;
                    add_header Access-Control-Allow-Headers *;
             }

    展开全文
  • Nginx跨域

    2019-12-04 19:28:21
    1. 什么是跨域跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的。 广义的跨域: 1.) 资源跳转:A链接、重定向、表单提交2.) 资源嵌入:<link>、<script>、<img>...

    1. 什么是跨域?

    跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的。

    广义的跨域:

    1.) 资源跳转:A链接、重定向、表单提交2.) 资源嵌入:<link>、<script>、<img>、<frame>等dom标签,还有样式中background:url()、@font-face()等文件外链3.) 脚本请求:js发起的ajax请求、dom和js对象的跨域操作等其实我们通常所说的跨域是狭义的,是由浏览器同源策略限制的一类请求场景。

    2. 什么是同源策略?

    源策略/SOP(Same origin policy)是一种约定,由Netscape公司1995年引入浏览器,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个ip地址,也非同源。

    同源策略限制以下几种行为:

    1.) Cookie、LocalStorage 和 IndexDB 无法读取2.) DOM 和 Js对象无法获得3.) AJAX 请求不能发送

    3. 常见跨域场景 

     常见跨域场景

    4. 跨域解决方案

    1、 通过jsonp跨域2、 document.domain + iframe跨域3、 location.hash + iframe4、 window.name + iframe跨域5、 postMessage跨域6、 跨域资源共享(CORS)7、 nginx代理跨域8、 nodejs中间件代理跨域9、 WebSocket协议跨域

     

    5. Nginx跨域

    (1)nginx配置解决iconfont跨域

    浏览器跨域访问js、css、img等常规静态资源被同源策略许可,但iconfont字体文件(eot|otf|ttf|woff|svg)例外,此时可在nginx的静态资源服务器中加入以下配置。

    location / {  add_header Access-Control-Allow-Origin *;}

    (2) nginx反向代理接口跨域

    跨域原理: 同源策略是浏览器的安全策略,不是HTTP协议的一部分。服务器端调用HTTP接口只是使用HTTP协议,不会执行JS脚本,不需要同源策略,也就不存在跨越问题。

    实现思路:通过nginx配置一个代理服务器(域名与domain1相同,端口不同)做跳板机,反向代理访问domain2接口,并且可以顺便修改cookie中domain信息,方便当前域cookie写入,实现跨域登录。

    nginx具体配置:

    #proxy服务器server {    listen       81;    server_name  www.domain1.com;
        location / {        proxy_pass   http://www.domain2.com:8080;  #反向代理        proxy_cookie_domain www.domain2.com www.domain1.com; #修改cookie里域名        index  index.html index.html
            # 当用webpack-dev-server等中间件代理接口访问nignx时,此时无浏览器参与,故没有同源限制,下面的跨域配置可不启用        add_header Access-Control-Allow-Origin http://www.domain1.com;  #当前端只跨域不带cookie时,可为*        add_header Access-Control-Allow-Credentials true;    }}

     

    1.) 前端代码示例:

    var xhr = new XMLHttpRequest();// 前端开关:浏览器是否读写cookiexhr.withCredentials = true;// 访问nginx中的代理服务器xhr.open('get', 'http://www.domain1.com:81/?user=admin', true);xhr.send();

    2.) Nodejs后台示例:

    var http = require('http');var server = http.createServer();var qs = require('querystring');
    server.on('request', function(req, res) {    var params = qs.parse(req.url.substring(2));    // 向前台写cookie    res.writeHead(200, {        'Set-Cookie': 'l=a123456;Path=/;Domain=www.domain2.com;HttpOnly'   // HttpOnly:脚本无法读取    });
        res.write(JSON.stringify(params));    res.end();});
    server.listen('8080');console.log('Server is running at port 8080...');

     

    展开全文
  • nginx解决跨域原理及相关配置

    万次阅读 2018-08-30 14:12:18
    nginx解决跨域原理及相关配置 1、什么是跨域 从某一个域请求其他域的各类资源,其中只要两个地址的域名、端口以及协议有不同的地方就会视为跨域,跨域资源无法直接获取。 比如: 域名不同 www.a.com/1.html ...

    nginx解决跨域原理及相关配置

    1、什么是跨域

    从某一个域请求其他域的各类资源,其中只要两个地址的域名、端口以及协议有不同的地方就会视为跨域,跨域资源无法直接获取。
    比如:
    域名不同 www.a.com/1.html 请求 www.b.com/1.js
    端口不同 www.a.com:8000/1.html 请求 www.a.com:8001/1.js
    协议不同 http://www.a.com/1.html 请求 https://www.a.com/1.html

    2、nginx如何解决跨域问题

    拿上面的来举例,a网站向b网站请求1.js文件时,向b网站发送一个获取的请求,nginx根据配置文件接收这个请求,代替a网站向b网站来请求这个资源,nginx拿到这个资源后再返回给a网站,以此来解决了跨域问题。

    3、nginx配置

      server {
            #监听8000端口
            listen       8000;
            #监听指定的ip地址
            server_name  10.10.2.116;
            #对对应url路径执行反向代理,如10.10.2.116:8000/demo
            location /demo {
            #目标的ip地址
                proxy_pass http://10.10.2.116:10037; 
            }
    }

    通过此配置可以实现访问10.10.2.116的8000端口来获取同ip下10037端口下的相应资源

    展开全文
  • nginx 跨域问题

    2020-04-28 16:38:38
    解决跨域有多重,在这里主要讲用nginx解决跨域 1.JSONP 2.nginx代理 3.浏览器禁止检查跨域 三. 下载安装nginx nginx下载地址 选择其中一个版本下载,再解压即可使用 在nginx目录下输入nginx -v,若出现版本号...

     

    一. 产生跨域的原因

    1.浏览器限制

    2.跨域

    3.XHR(XMLHttpRequest)请求

    二. 解决思路

    解决跨域有多重,在这里主要讲用nginx解决跨域

    1.JSONP

    2.nginx代理

    3.浏览器禁止检查跨域

    三. 下载安装nginx

    nginx下载地址

    • 选择其中一个版本下载,再解压即可使用
    • 在nginx目录下输入nginx -v,若出现版本号,则安装成功
    • nginx

    四. nginx反向代理解决跨域(客户端解决跨域)

    1.我们使用jquery的ajax发送请求,node开启后台服务

    前端代码:
    利用jQuery的ajax api发送请求

        <button id="getOK">发送请求OK(客户端解决跨域问题)</button>
        <button id="getNO">发送请求NO(客户端解决跨域问题)</button>
        <script>
            $(document).ready(function () {
                $('#getOK').click(function () {
                    $.ajax({
                        url:'http://localhost:3000/ok',
                        success:function(res) {
                            console.log("success",res)
                        },
                        error:function(err) {
                            console.log('fail',err)
                        }
                    })
                })
                $('#getNO').click(function () {
                    $.ajax({
                        url:'http://localhost:3000/no',
                        success:function(res) {
                            console.log("success",res)
                        },
                        error:function(err) {
                            console.log('fail',err)
                        }
                    })
                })
            }) 
        </script>

    后端代码:
    利用node的express框架开启服务,并根据url返回json格式的数据,
    设置这么多接口的目的是为了后面匹配nginx的location配置的

    const express = require('express')
    const cookieParser = require('cookie-parser')
    
    var app = express()
    
    
    var router = express.Router()
    router.get('/ok',function (req,res) {
        res.json({
            code:200,
            msg:"isOK"
        })    
    })
    
    router.get('/ok/son',function (req,res) {
        res.json({
            code:200,
            msg:"isOKSon"
        })    
    })
    
    router.get('/ok2',function (req,res) {
        res.json({
            code:200,
            msg:"isOK2"
        })    
    })
    
    router.get('/no',function (req,res) {
        res.json({
            code:200,
            msg:"isNO"
        })    
    })
    
    router.get('/no/son',function (req,res) {
        res.json({
            code:200,
            msg:"isNOSON"
        })    
    })
    
    router.get('/no/son2',function (req,res) {
        res.json({
            code:200,
            msg:"isNOSON2"
        })    
    })
    
    app.use(router)
    app.use(cookieParser)
    app.listen(3000,function () {
        console.log('listen in 3000')
    })

    然后开启node服务
    开启node服务
    现在可以测试下接口
    测试接口
    可以看出,node服务成功开启
    现在可以尝试不开启nginx服务直接发送ajax请求会出现什么情况
    (注意:发送ajax请求需要以服务器方式打开网页,不能以文件形式)
    跨域问题
    如图,在5500端口请求3000端口出现了跨域问题,这时候就可以开启nginx服务并配置location进行解决

    2.配置nginx进行反向代理解决跨域

    反向代理的原理就是讲前端的地址和后端的地址用nginx转发到同一个地址下,如5500端口和3000端口都转到3003端口下,具体配置如下:

    • 打开nginx目录下的conf目录里面nginx.conf
    • 为了方便以后测试,我们将配置分离开来,弄成多个文件
    • 在nginx.conf的http对象的最后加上include ../vhost/test.conf;(注意要最后加上分号)
    • 这样就可以在test.conf下单独配置了

    具体的location配置规则如下:
    nginx的location配置规则

    server
    {
       listen 3003;
       server_name localhost;
       ##  = /表示精确匹配路径为/的url,真实访问为http://localhost:5500
       location = / {
           proxy_pass http://localhost:5500;
       }
       ##  /no 表示以/no开头的url,包括/no1,no/son,或者no/son/grandson
       ##  真实访问为http://localhost:5500/no开头的url
       ##  若 proxy_pass最后为/ 如http://localhost:3000/;匹配/no/son,则真实匹配为http://localhost:3000/son
       location /no {
           proxy_pass http://localhost:3000;
       }
       ##  /ok/表示精确匹配以ok开头的url,/ok2是匹配不到的,/ok/son则可以
       location /ok/ {
           proxy_pass http://localhost:3000;
       }
    }

    上面代码的意思是将localhost:3003转发为location:5500,也就是说现在访问localhost:3003实际上是访问location:5500,而访问localhost:3003/no则是访问localhost:3000,并以no开头的url

    • 现在我们可以开启nginx服务了,在nginx目录下使用start nginx即可开启服务

    开启nginx服务

    • 每次修改配置都需要执行nginx -s reload命令才能生效

    reload
    现在修改前端代码,将之前请求的接口的端口换为3003,如下:

    $('#getOK').click(function () {
                    $.ajax({
                        url:'http://localhost:3003/ok',
                        success:function(res) {
                            console.log("success",res)
                        },
                        error:function(err) {
                            console.log('fail',err)
                        }
                    })
                })

    在浏览器访问的也不算location:5500,而是localhost:3003了,再次发送请求也不会出现跨域问题了,因为他们都是同一个域了,这就是nginx反向代理
    成功

    五. 后端配置nginx解决跨域(服务端解决跨域)

    1. 依旧是ajax+node

    这是前端代码

    $(document).ready(function () {
                $('#get').click(function () {
                    $.ajax({
                        url:'http://localhost:3002/ok',
                        //  带cookies的请求
                        xhrFields:{
                            withCredentials:true
                        },
                        success:function(res) {
                            console.log("success",res)
                        },
                        error:function(err) {
                            console.log('fail',err)
                        }
                    })
                })
            })

    后端代码同前面
    还有nginx配置如下:

    
    server
    {
        listen 3002;
        server_name localhost;
        location /ok {
            proxy_pass http://localhost:3000;
    
            #   指定允许跨域的方法,*代表所有
            add_header Access-Control-Allow-Methods *;
    
            #   预检命令的缓存,如果不缓存每次会发送两次请求
            add_header Access-Control-Max-Age 3600;
            #   带cookie请求需要加上这个字段,并设置为true
            add_header Access-Control-Allow-Credentials true;
    
            #   表示允许这个域跨域调用(客户端发送请求的域名和端口) 
            #   $http_origin动态获取请求客户端请求的域   不用*的原因是带cookie的请求不支持*号
            add_header Access-Control-Allow-Origin $http_origin;
    
            #   表示请求头的字段 动态获取
            add_header Access-Control-Allow-Headers 
            $http_access_control_request_headers;
    
            #   OPTIONS预检命令,预检命令通过时才发送请求
            #   检查请求的类型是不是预检命令
            if ($request_method = OPTIONS){
                return 200;
            }
        }
    }

    发送预检命令的是非简单请求,具体可以看慕课网ajax跨域完全讲解
    实际上不是非简单请求的且不带cookie只需2个字段即可解决跨域
    add_header Access-Control-Allow-Methods *;
    add_header Access-Control-Allow-Origin $http_origin;

    • 具体效果如下图:
    • 服务端跨域

    这时只需改ajax请求的端口接口,无需修改前端服务器的地址

    最后附上源码:
    nginx解决跨域问题

    展开全文
  • Nginx 跨域代理

    2019-09-26 13:03:35
    安装环境: win10 nginx-1.17.2 安装: 在写前端调用后台接口时,报了跨域的错误。 ...利用nginx配置跨域原理是,将调试地址和接口地址映射成同源地址即可。 上述两个地址经代理后变成:...
  • Nginx跨域解释

    2020-03-17 16:18:39
    #指定允许跨域的方法,*代表所有 add_header Access-Control-Allow-Methods *; #预检命令的缓存,如果不缓存每次会发送两次请求 add_header Access-Control-Max-Age 3600; #带cookie请求需要加上这...
  • 跨域请求的问题是一个很常见...今天说的这种Nginx跨域方案是通过Nginx的反向代理,欺骗浏览器,让浏览器以 为是同源调用。 方案 我们假设应用的域名是aaaa,要请求bbbb上提供的接口服务。bbbb上服务的url是bbbb/api。...
  • 10分钟入门Nginx跨域配置代理转发和CORS Nginx代理转发 Nginx的CORS配置 iframe间通信跨域的解决方案 跨域问题一直是开发人员比较困扰的问题,我们常常求助于他人来解决,一旦解决就不管了,导致当没人救你的时候你...
  • jsonp和Nginx跨域

    2019-12-04 17:36:05
    1、一个众所周知的问题,Ajax直接请求普通文件存在跨域无权限访问的问题,甭管你是静态页面、动态网页、web服务、WCF,只要是跨域请求,一律不准。 2、不过我们又发现,Web页面上调用js文件时则不...
  • 1. 跨域(反向代理)(正向代理隐藏真实客户端,反向代理隐藏真实服务端)『反向代理:客户端无法感知代理,因为客户端访问网络不需要配置,只要把请求发送到反向代理服务器,由反向代理服务器去选择目标服务器获取...
  • nginx 版本 1.11.3 使用大家说的以下配置,验证无效,跨域问题仍然存在 add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Access-Control-Allow...
  • vue项目打包部署在nginx跨域访问问题

    千次阅读 2019-01-22 18:23:21
    http请求存在简单请求和复杂请求两种,具体原理可以去读阮一峰这篇文章,讲解的很明白。出自http://www.ruanyifeng.com/blog/2016/04/cors.html 1、一般简单请求跨域访问会出现“No ‘Access-Control-Allow-Origin’...
  • nginx解决跨域问题详解

    千次阅读 2018-01-14 22:17:07
    今天看了一篇nginx跨域原理的文章,还没有验证过,先记下,文章的链接是: http://www.liuyiqi.cn/2015/12/17/nginx-cross-domain/,另外,今天感冒好了,感觉自己萌萌哒。
  • 项目nginx 跨越配置如下: 在浏览器中输入:http://xiaozhaowang.net,就是无法获取验证码,如下图: 分析过程如下: 一、定位是否是vue前端Nginx配置的问题 1、查看 服务器8111端口是否打开 使用 ...
  • nginx解决跨域问题

    千次阅读 2019-05-13 14:41:57
    解决跨域有多重,在这里主要讲用nginx解决跨域 1.JSONP 2.nginx代理 3.浏览器禁止检查跨域 三. 下载安装nginx nginx下载地址 选择其中一个版本下载,再解压即可使用 在nginx目录下输入nginx -v,若出现版本号,则...
  • nginx解决跨域原理及相关配置 1、什么是跨域 从某一个域请求其他域的各类资源,其中只要两个地址的域名、端口以及协议有不同的地方就会视为跨域,跨域资源无法直接获取。 比如: 域名不同 www.baidu.com/1.html 请求...
  • 跨域问题:CORS解决跨域原理 1.什么是跨域问题?如图 1.1跨域问题需要满足以下条件 1.1.1 跨域 域名不同,域名相同,端口不同或者二级域名不同 1.1.2 是针对ajax的一种限制 跨域问题是浏览器对于ajax请求的一种安全...
  • nginx实现跨域访问

    万次阅读 2016-03-31 09:51:21
    跨域概念简单来说:两个url只要协议、域名、端口有任何一个不同,都被当作是不同的域,相互访问就会有跨域问题。案例例如:在开发前后端完全分离的系统中,服务端代码属于一个工程,前端代码属于另一个工程,前端...
  • 前言: 身为一名前端菜鸟,之前一直未关注后端对于跨域的配置,这不,终于又踩到坑了,由于nginx未配置代理转发,所以前端的处理一直都是针对开发环境和生产环境做处理 // 错误 的代理配置,同样启用proxy代理,并在...
  • 9大跨域解决方案 同源策略 只要以下三者,有一个不一样,那就叫跨域。 ...注意:子域不同,也叫跨域 ...为什么浏览器不支持跨域 ...cookie localStorage 均不支持...跨域原理 当客户端向服务端发送请求后,服务...
  • 自从搞清楚了跨域原理后一直自鸣得意,感觉跨域没啥问题了。而事实上对关于跨域的几个header的理解也有限,但那又如何,我能做到跨域就行了。今天想把博客背景图改成bing的每日一图,发现遇到跨域问题。首先想到的...
  • 解决跨域有多重,在这里主要讲用nginx解决跨域 1.JSONP 2.nginx代理 3.浏览器禁止检查跨域 三. 下载安装nginx 选择其中一个版本下载,再解压即可使用 在nginx目录下输入nginx -v,若出现版本号,则安装成功 四...
  • nginx跨域解决方案

    2019-01-03 23:32:08
    1、引入nginx的原因(反向代理)。 我们可以使用hosts修改域名直接指定IP地址,但是只能访问默认端口80。这是远远不够的。 80是http协议的默认端口,是在输入网站的时候其实浏览器(非IE)已经帮你输入协议了,所以...
  • 记录一次在开发的时候遇到跨域问题 技术栈:vue nginx 首先要弄清楚跨域的产生原因,请自行百度。清楚以后开始配置: 再开发环境的时候不推荐后端去设置允许跨域。至于为什么,请自行百度。找度娘准没错的。。。 ...
  • 解决跨域有多重,在这里主要讲用nginx解决跨域 JSONP nginx代理 浏览器禁止检查跨域 三. 下载安装nginx nginx下载地址 选择其中一个版本下载,再解压即可使用 在nginx目录下输入nginx -v,若出现版本号,则安装...
  • 参考文档http://www.ruanyifeng.com/blog/2016/04/cors.html1 nginx允许跨域配置: location / { add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS'; ...
  • 理解Nginx工作原理

    2020-05-01 14:03:11
    理解Nginx工作原理1 反向代理1.1 概念1.2 工作流程1.3 优点2 Nginx模块2.1 模块划分2.2 模块处理3 Nginx请求处理3.1 多进程处理模型3.2 一个简单的HTTP请求3.3 请求完整处理过程3.4 keepalive 长连接 1 反向代理 1.1...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,154
精华内容 3,261
关键字:

nginx跨域原理