Nginx 允许跨域访问

一、跨域访问

什么是跨域访问,当我们通过浏览器访问a网站时,同事会利用到ajax或其他方式,同时也请求b网站,这样的话就出现了请求一个页面,使用了两个域名,这种方式对浏览器来说默认是禁止的。

 

二、设置跨域访问

1.配置被跨域的网站

1)配置nginx

[root@web02 conf.d]# vim beikuayu.conf
server {
    listen 80;
    server_name beikuayu.test.com;

    location / {
        root /code;
        index index.html;
    }
}

2)重启nginx
3)配置页面

[root@web02 conf.d]# echo "beikuayuwangzhan" > /code/index.html

 

2.配置跨域网站

1.配置nginx

[root@web01 conf.d]# vim kuayu.conf
server {
    listen 80;
    server_name kuayu.test.com;

    location / {
        root /code/kuayu;
        index index.html;
    }
}

2)配置页面

[root@web01 conf.d]# mkdir /code/kuayu
<html lang="en">
<head>
        <meta charset="UTF-8" />
        <title>测试ajax和跨域访问</title>
        <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function(){
        $.ajax({
        type: "GET",
        url: "http://beikuayu.test.com",
        success: function(data) {
                alert("sucess 卧槽 卧槽 卧槽 成功了!!!");
        },
        error: function() {
                alert("fail!!,跨不过去啊,不让进去啊,只能蹭蹭!");
        }
        });
});
</script>
        <body>
                <h1>测试跨域访问</h1>
        </body>
</html>

3)配置hosts
4)重启nginx

3.配置允许跨域访问

[root@web02 conf.d]# vim beikuayu.conf

server {
    listen 80;
    server_name beikuayu.test.com;
    root /code;
    index index.html;

    location ~* \.html$ {
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS;
    }
}

 

点赞

发表评论

电子邮件地址不会被公开。必填项已用 * 标注