Nginx配置解决前端跨域问题

June 8, 2019CommentsRead

前言：

同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。所谓同源是指，域名，协议，端口相同。如果非同源，那么在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问。文章源自 note.t4x.orgByrd's Blog-https://note.t4x.org/basic/nginx-cross-site/

一、跨域演示

网站A域名：http://192.168.2.126
网站B域名：http://note.t4x.org 文章源自 note.t4x.orgByrd's Blog-https://note.t4x.org/basic/nginx-cross-site/

A网站首页：[调用B网站内容]

$ cat 9.html 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>跨域测试</title>
        <script type="text/javascript">
            var xmlHttp = new XMLHttpRequest();
            xmlHttp.onreadystatechange = function() {
                if (xmlHttp.readyState == 4) {
                    console.info(xmlHttp.responseText);
                }
            };
            xmlHttp.open("GET", "http://192.168.2.126/1.html", true);
            //xmlHttp.open("GET", "https://note.t4x.org/abc.html", true);
            xmlHttp.send();
        </script>
    </head>
    <body>
        <h1>跨域测试</h4>
    </body>
</html>

$ cat 9.html

<!DOCTYPE html>

<html>

<head>

var xmlHttp = new XMLHttpRequest();

xmlHttp.onreadystatechange = function() {

if (xmlHttp.readyState == 4) {

console.info(xmlHttp.responseText);

}

};

xmlHttp.open("GET", "http://192.168.2.126/1.html", true);

//xmlHttp.open("GET", "https://note.t4x.org/abc.html", true);

xmlHttp.send();

</script>

</head>

<body>

</body>

</html>

$ cat 1.html 
1111

0 1	$ cat 1.html 1111

文章源自 note.t4x.orgByrd's Blog-https://note.t4x.org/basic/nginx-cross-site/

正常情况下：

同域

跨站情况下：

跨站

请求头：

请求头

文章源自 note.t4x.orgByrd's Blog-https://note.t4x.org/basic/nginx-cross-site/

二、解决方法

①：单域名

        location / {
            ....
            add_header Access-Control-Allow-Origin http://192.168.2.126;
            add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS;
            ....
            }

location / {

....

add_header Access-Control-Allow-Origin http://192.168.2.126;

add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS;

....

}

②：多域名
方法1：文章源自 note.t4x.orgByrd's Blog-https://note.t4x.org/basic/nginx-cross-site/

http:

# CorsSite # map $http_origin $CorsSite { default 0; "~http://localhost:8889" http://192.168.2.126; "~http://www.xxx.com" http://www.xxx.com; } # CorsSite #

0
1
2
3
4
5
6

    # CorsSite #
    map $http_origin $CorsSite {
        default 0;
        "~http://localhost:8889" http://192.168.2.126;
        "~http://www.xxx.com" http://www.xxx.com;
    }
    # CorsSite #

server：

location / { .... add_header Access-Control-Allow-Origin $CorsSite; add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS; ... }

0
1
2
3
4
5

    location / {
        ....
        add_header Access-Control-Allow-Origin $CorsSite;
        add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS;
        ...
        }

文章源自 note.t4x.orgByrd's Blog-https://note.t4x.org/basic/nginx-cross-site/

方法2：

    set $cors_origin "";
    if ($http_origin ~* "^http://192.168.2.126$") {
            set $cors_origin $http_origin;
    }
    if ($http_origin ~* "^http://localhost$") {
            set $cors_origin $http_origin;
    }
    add_header Access-Control-Allow-Origin $cors_origin;

    location / {

        if ($request_method = 'OPTIONS') {
            add_header Access-Control-Allow-Origin $cors_origin;
            add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS;
        }

set $cors_origin "";

if ($http_origin ~* "^http://192.168.2.126$") {

set $cors_origin $http_origin;

}

if ($http_origin ~* "^http://localhost$") {

set $cors_origin $http_origin;

}

add_header Access-Control-Allow-Origin $cors_origin;

location / {

if ($request_method = 'OPTIONS') {

add_header Access-Control-Allow-Origin $cors_origin;

add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS;

}

文章源自 note.t4x.orgByrd's Blog-https://note.t4x.org/basic/nginx-cross-site/

③：所有域名

<pre>
        location / {
            add_header Access-Control-Allow-Origin *;
            add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS;
            }

<pre>

location / {

add_header Access-Control-Allow-Origin *;

add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS;

}

多域名配置参考：
1：https://my.oschina.net/yzChen/blog/1573828
2：https://www.cnblogs.com/renjing/p/6394725.html文章源自 note.t4x.orgByrd's Blog-https://note.t4x.org/basic/nginx-cross-site/ 文章源自 note.t4x.orgByrd's Blog-https://note.t4x.org/basic/nginx-cross-site/

申明：除非注明Byrd's Blog内容均为原创,未经许可禁止转载!详情请阅读版权申明!