GET请求-跨域测试页面-Niginx跨域设置

最新推荐文章于 2023-12-06 16:45:04 发布

L'y

最新推荐文章于 2023-12-06 16:45:04 发布

阅读量215

点赞数

分类专栏： python 文章标签： php 前端 javascript

本文链接：https://blog.csdn.net/Ly_Word/article/details/126560161

版权

python 专栏收录该内容

59 篇文章 0 订阅

订阅专栏

测试跨域是否正常.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跨域测试</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/bootstrap/4.5.3/css/bootstrap.min.css" >
</head>
<body>
<div class="container">
    <h1 style="margin-top:50px">跨域测试</h1>
    <!-- Content here -->
    <p class="text-left">API地址:</p>
    <input type="text" style="width:600px;height:30px;font-size:14px;" id="urlText" value=""/>
    <p>&nbsp;
    <p/>
    <p class="text-left">Token:</p>
    <input type="text" style="width:600px;height:30px;font-size:14px;" id="tokenTxt"  value=""/>
    <p>&nbsp;
    <p/>
    <input type="button" class="btn btn-outline-primary" id="cors" value="验证跨域"/>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js" ></script>
<script src="https://cdn.staticfile.org/popper.js/1.8.0/popper.min.js" ></script>
<script src="https://cdn.staticfile.org/bootstrap/4.5.3/js/bootstrap.min.js" ></script>

<script type="text/javascript">
    $("#cors").on('click', function (event) {
        event.preventDefault();
        var url2 = $("#urlText").val();
        $.get({
            contentType: 'application/x-www-form-urlencoded;charset=UTF-8',
            url: url2,
            beforeSend: function (xhr) {
                if ($("#tokenTxt").val().trim()) {
                    /* Authorization header */
                    xhr.setRequestHeader("Authorization", "Bearer " + $("#tokenTxt").val());
                }
            },
            success: function (data) {
                alert("success");
            },
            error:function(data){
				alert("failed");
            }
        })
    });
</script>
</body>
</html>

niginx跨域设置

这是基于宝塔的配置文件

server
{
		listen 8866;
    server_name you_server_ip;
    index index.php index.html index.htm default.php default.htm default.html;
    root /www/wwwroot/you_project_path;
    add_header Access-Control-Allow-Origin '*';
    add_header Access-Control-Allow-Methods 'POST,GET,OPTIONS';
    add_header Access-Control-Allow-Headers '*'; 


    #SSL-START SSL相关配置，请勿删除或修改下一行带注释的404规则
    #error_page 404/404.html;
    #SSL-END

    #ERROR-PAGE-START  错误页配置，可以注释、删除或修改
    #error_page 404 /404.html;
    #error_page 502 /502.html;
    #ERROR-PAGE-END

    #PHP-INFO-START  PHP引用配置，可以注释或修改
    #清理缓存规则

    location ~ /purge(/.*) {
        proxy_cache_purge cache_one $host$1$is_args$args;
        #access_log  /www/wwwlogs/codelexis.top_purge_cache.log;
    }
	#引用反向代理规则，注释后配置的反向代理将无效
	include /www/server/panel/vhost/nginx/proxy/you_project_path/*.conf;

	include enable-php-00.conf;
    #PHP-INFO-END

    #REWRITE-START URL重写规则引用,修改后将导致面板设置的伪静态规则失效
    include /www/server/panel/vhost/rewrite/you_project_path;
    #REWRITE-END

    #禁止访问的文件或目录
    location ~ ^/(\.user.ini|\.htaccess|\.git|\.svn|\.project|LICENSE|README.md)
    {
        return 404;
    }

    #一键申请SSL证书验证目录相关设置
    location ~ ^/.well-known/{
        allow all;
    }

    #禁止在证书验证目录放入敏感文件
    if ( $uri ~ "^/\.well-known/.*\.(php|jsp|py|js|css|lua|ts|go|zip|tar\.gz|rar|7z|sql|bak)$" ) {
        return 403;
    }

    access_log  /www/wwwlogs/xxx.log;
    error_log  /www/wwwlogs/xxxx.log;
}