浏览器跨域测试

一:前端浏览器禁用安全设置

chrome的话可以通过在命令行,输入chrome.exe –allow-file-access-from-files –user-data-dir="C:/Chrome dev session" –disable-web-security

二:http服务器设置:

   nginx的设置:

location /api {

 add_header Access-Control-Allow-Origin $http_origin;

# add_header Access-Control-Allow-Origin *;

add_header Access-Control-Allow-Credentials true;

 add_header Access-Control-Allow-Methods *;

 add_header Access-Control-Allow-Headers $http_access_control_request_headers;

 add_header Access-Control-Max-Age 3600;

     proxy_set_header Host $host;

     proxy_set_header X-Real-IP $remote_addr;

     proxy_set_header REMOTE-HOST $remote_addr;

     proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

     proxy_pass http://masConsole;

     if ($request_method = OPTIONS){

         return 200; 

     }

 }

例子:编写html跨域的ajax页面:

<html>  

  

<head>  

    <title>tab标签页</title>  

    <style>  

        * {  

            padding: 0;  

            margin: 0;  

        }  

        ul {  

            list-style-type: none;  

        }  

        body {  

            margin: 50px;  

        }  

        #ul {  

            height: 30px;  

            margin-bottom: 10px;  

        }  

        #ul li {  

            height: 30px;  

            line-height: 30px;  

            padding: 0 15px;  

            border: 1px solid #abcdef;  

            float: left;  

            margin-right: 3px;  

            cursor: pointer;  

        }  

        #ul li.current {  

            background: #abcdef;  

        }  

        #content div {  

            width: 300px;  

            height: 200px;  

            border: 1px solid #abcdef;  

            display: none;  

        }  

        #content div.show {  

            display: block;  

        }  

    </style>  

    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>  

    <script>  

        $(function () {  

            $("#ul li").click(function () {  

                /*//1.点击li的时候切换样式  

                $(this).addClass("current").siblings().removeClass("current");  

                //2.根据li的索引值,来确定哪个div显示,其他div隐藏  

                $("#content>div").eq($(this).index()).show().siblings().hide();*/  

                //$(this).addClass("current").siblings().removeClass("current").parent().next().children().eq($(this).index()).show().siblings().hide();  

                $(this).addClass("current").siblings().removeClass("current").parent().next().find("div").eq($(this).index()).show().siblings().hide();  

            

   $.ajax({

url: 'https://mp.sda.cn:9999/api/customer/uaa/nologin/login?Session_businessId=1',

type: 'post',

data:{"nameLogin":"000044","passwordLogin":"000000"},

dataType: 'json',

success: function(data){

   alert(JSON.stringify(data));

console.log(JSON.stringify(data));

},

error: function(err){

 alert(JSON.stringify(err));

console.log(JSON.stringify(err));

}

});

});  

        });  

    </script>  

</head>  

  

<body>  

    <ul id="ul">  

        <li class="current">php</li>  

        <li>ruby</li>  

        <li>python</li>  

    </ul>  

    <div id="content">  

        <div class="show">php…介绍</div>  

        <div>ruby…介绍</div>  

        <div>python…介绍</div>  

chrome的话可以通过在命令行,输入chrome.exe –allow-file-access-from-files –user-data-dir="C:/Chrome dev session" –disable-web-security

    </div>  

</body>  

  

</html> 

原创文章,作者:奋斗,如若转载,请注明出处:https://blog.ytso.com/tech/opensource/191704.html

(0)
上一篇 2021年11月14日 18:14
下一篇 2021年11月14日 18:14

相关推荐

发表回复

登录后才能评论