zoukankan      html  css  js  c++  java
  • (011)Nginx静态资源web服务_跨站访问

      1、什么是跨域访问

      浏览器访问同一个服务端时,在一个页面中请求另一个域名中的页面。这样一个页面请求服务端,用到了两个域名,这就是跨域。浏览器一般默认禁止跨域。因为跨域不安全:容易出现CSRF攻击。所谓CSRF攻击是指一个用户访问一个正规的网站A,正常网站A会返回用户对应的cookie信息存放在客户端,但是当该客户不小心点到了非法网站,网站会给客户端发恶意的请求,然后让用户请求网站A。

      浏览器通过判断服务端返回给浏览器的head response里面的Access-Control-Allow-Origin头信息,控制是否允许跨域,如果服务器端允许跨站访问,那么浏览器端就不做限制。

      2、配置语法及其演示

      语法:

      Syntax:add_header name value [always];
      Default:-;
      Context:http,server,location,if in location

      演示:

      用两个虚拟机代表不同的服务器,151是浏览器访问的页面,152是跨域访问的页面。

      151上新建/opt/app/code/test_oringin.html

    <html lang="en">  
    <head>  
    <meta charset="UTF-8" />  
    <title>测试ajax和跨域访问</title>  
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>  
    </head>  
    <script type="text/javascript">  
    $(document).ready(function(){  
        $.ajax({  
            type: "GET",  
            url: "http://192.168.7.152/1.html",  
            success: function(data) {   
                alert("sucess!!!");  
            },  
            error: function() {  
                alert("fail!!!,请刷新再试!");  
            }  
        });  
    });  
    </script>  
    <body>  
         <h1>测试跨域访问</h1>
    </body>  
    </html>  

      配置文件增加访问首页目录配置

    location ~ .*.(html|htm)$ {
        root  /opt/app/code;
    }  

      152上新建/usr/share/nginx/html/1.html

    <html>
    <head>
        <meta charset="utf-8">
        <title>imooc1</title>
    </head>
    <body style="background-color:red;">
    <br> test aaaaa
    </body>
    </html>

      启动两台虚拟机的Nginx服务,浏览器访问 http://192.168.7.151/test_oringin.html,出现 No 'Access-Control-Allow-Origin' header

      

      修改152的配置文件 /etc/nginx/conf.d/default.conf,添加如下配置,*的话允许所有网站访问。

    location / {
        add_header Access-Control-Allow-Origin http://192.168.7.151; 
        add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS;
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }

      

      重新启动152的nginx,清空缓存,重复访问http://192.168.7.151/test_oringin.html ,跨域成功!

      

      

  • 相关阅读:
    Windows下安装使用OpenLDAP
    LDAP安装配置(windows)
    LDAP概念和原理介绍
    JDK自带的keytool证书工具详解
    递归算法讲解
    Creating an archive from a directory without the directory name being added to the archive
    Overview of the M&A Process
    Make sure base method gets called in C#
    How to delete specific nodes from an XElement?
    如何学习数据结构?
  • 原文地址:https://www.cnblogs.com/javasl/p/12862697.html
Copyright © 2011-2022 走看看