首页 > Web开发 > 详细

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

时间:2020-01-07 17:16:05      阅读:414      评论:0      收藏:0      [点我收藏+]

跨站访问

技术分享图片技术分享图片?

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

技术分享图片技术分享图片?

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

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

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

原文:https://www.cnblogs.com/joy-sir/p/12162525.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!