Nginx配置允许跨域

一、nginx跨域是什么

同源策略是浏览器最常用的安全策略，它的基本思想是：限制一个文档或者脚本只能获取属于它自己的资源，防止恶意的网站窃取数据。在这个限制下，跨域就成了一个不可避免的问题。

简单来说，当一个网页从一个域名去请求另一个域名下的资源时，就会触发跨域问题。例如，从http://www.example.com/index.html中的JS代码请求http://www.baidu.com的资源就构成了跨域。

二、nginx跨域怎么配置

下面给出配置详细步骤：

1.修改nginx配置文件nginx.conf，添加如下内容：

    server{
        listen       80;
        server_name  example.com;
        location / {
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'DNT,Websocket-Upgrade,Upgrade-Insecure-Requests,User-Agent,Referer,Cache-Control,Origin, X-Requested-With, Content-Type, Authorization, Accept-Language';
            add_header 'Access-Control-Allow-Credentials' true;
            if ($request_method = 'OPTIONS') {
                return 204;
            }
        }
    }

2.重启nginx。

    sudo systemctl restart nginx

3. 验证是否配置成功。在chrome浏览器上打开console窗口，输入如下代码：

    fetch('http://example.com').then(response => response.text()).then(data => console.log(data))

如果出现返回数据说明配置成功。如果仍然报错，请核对配置是否正确。

三、nginx允许跨域

如何允许跨域？

下面是一些常用的允许跨域的方式：

1.使用反向代理

有时候我们的API服务器由于各种原因，不能直接访问，这个时候我们可以使用反向代理。如下：

    server {
        listen       80;
        server_name  example.com;
        location / {
            proxy_pass http://api.example.com;
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS';
            add_header 'Access-Control-Allow-Headers' '*';
        }
    }

2.使用jsonp

jsonp是一种前端跨域解决方案，它采用script标签跨域获取数据。如下：

    <script>
        function jsonpCallback(data) {
            console.log(data)
        }
        var script = document.createElement('script')
        script.src = 'http://example.com/data.php?callback=jsonpCallback'
        document.body.appendChild(script)
    </script>

3.使用cors

CORS是一种新的跨域解决方案，它是通过在http头中添加“Access-Control-Allow-Origin”来授权跨域的。如下：

    header("Access-Control-Allow-Origin: *");
    header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
    header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");

四、nginx解决跨域配置详细教程

详细的nginx解决跨域配置教程如下：

1.在nginx.conf中添加以下内容：

    server {
        listen              80;
        server_name         example.com;

        location / {
            if ($request_method = 'OPTIONS') {
                add_header 'Access-Control-Allow-Origin' '*';
                add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
                add_header 'Access-Control-Allow-Headers' 'DNT,Websocket-Upgrade,Upgrade-Insecure-Requests,User-Agent,Referer,Cache-Control,Origin, X-Requested-With, Content-Type, Authorization, Accept-Language';
                add_header 'Access-Control-Allow-Credentials' true;
                add_header 'Access-Control-Max-Age' 1728000;
                add_header 'Content-Type' 'text/plain; charset=utf-8';
                add_header 'Content-Length' 0;
                return 204;
            }
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'DNT,Websocket-Upgrade,Upgrade-Insecure-Requests,User-Agent,Referer,Cache-Control,Origin, X-Requested-With, Content-Type, Authorization, Accept-Language';
            add_header 'Access-Control-Allow-Credentials' true;
            add_header 'Access-Control-Max-Age' 1728000;
            add_header 'Content-Type' 'application/json; charset=utf-8';
        }
    }

2.重启nginx。

    sudo systemctl restart nginx

3.测试nginx跨域是否成功配置。

    fetch('http://example.com').then(response => response.text()).then(data => console.log(data))

五、nginx安装配置

若您还没有为您的服务器安装nginx，请按照以下步骤进行：

1.安装nginx：

    sudo apt-get update
    sudo apt-get install nginx

2.启动nginx：

    sudo systemctl start nginx

3.检查nginx是否启动：

    systemctl status nginx

六、正确的nginx跨域配置

正确的nginx跨域配置应该包含以下几个方面：

1.允许多个域名跨域

在“Access-Control-Allow-Origin”中添加多个域名。如下：

    add_header 'Access-Control-Allow-Origin' 'http://a.com, http://b.com, http://c.com';

2.允许特定域名跨域

在“Access-Control-Allow-Origin”中添加特定的域名。如下：

    add_header 'Access-Control-Allow-Origin' 'http://a.com';

3.允许所有域名跨域

在“Access-Control-Allow-Origin”中添加通配符“*”。如下：

    add_header 'Access-Control-Allow-Origin' '*';

4.允许请求头

在“Access-Control-Allow-Headers”中添加允许请求头。如下：

    add_header 'Access-Control-Allow-Headers' 'DNT,Websocket-Upgrade,Upgrade-Insecure-Requests,User-Agent,Referer,Cache-Control,Origin, X-Requested-With, Content-Type, Authorization, Accept-Language';

5.允许请求方法

在“Access-Control-Allow-Methods”中添加允许请求方法。如下：

    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';

6.允许携带cookie

在“Access-Control-Allow-Credentials”中允许携带cookie。如下：

    add_header 'Access-Control-Allow-Credentials' true;

注：如果不需要携带cookie，该项可以省略。

7.缓存预检请求

可以在“Access-Control-Max-Age”中设置预检请求的过期时间。如下：

    add_header 'Access-Control-Max-Age' 1728000;

在实际使用中，应根据需求选取相关参数进行配置，保证安全和稳定而不浪费资源。