首页技术正文

Nginx作为web静态资源服务器——跨域访问

开发者世昌技术 2022年11月21日

0 收藏 515 点赞 3,505 浏览 910 个字

跨站访问

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

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

注意：配置语法中的域名，需要公网的域名