zoukankan      html  css  js  c++  java
  • Nginx作为web静态资源服务器——跨域访问

    跨站访问

    为什么浏览器禁止跨域访问

    Nginx跨站访问

    Syntax:add_header name value [always];

    Default:——

    Context:http,server,location,if in location

    Access-Control-Allow-Origin     # 通过header判断是否可以跨站访问

    演示

    创建一个html文件

    vi /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://www.joy.com/1.html",    #如果访问跨域成功,返回success
            success: function(data) {
                alert("sucess!!!");
            },
            error: function() {
                alert("fail!!!,请刷新再试!");        # 如果访问跨域成功,返回“请刷新再试”
            }
        });
    });
    </script>
    <body>
         <h1>测试跨域访问</h1>
    </body>
    </html>
    

    没有配置语法访问,会返回刷新

    配置语法

    
        location ~ .*.(htm|html) {
            #expires 24h;
            #add_header Access-Control-Allow-Crigin http://www.joy.com;  # 允许跨域访问的域名
            #add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS; # 配置请求方式
            root   /opt/app/code;
        }
    

    再次访问,可以成功跳转到http://www.joy.com/1.html

    注意:配置语法中的域名,需要公网的域名

  • 相关阅读:
    manjora20安装搜狗输入法
    manjora20使用体验
    deepin20体验
    deepin20搜狗输入法使用
    deepin20使用snap并设置代理
    C#服务器端使用office组件
    华为多屏互动看学英语
    ThinkPad S5立体声混响以及语音识别
    mate10碎屏机当成小电脑使用尝试
    刷机错误ERROR:STATUS_BROM_CMD__FAIL
  • 原文地址:https://www.cnblogs.com/joy-sir/p/12162525.html
Copyright © 2011-2022 走看看