nginx 设置允许跨域请求

导语

在当前的web开发环境中,前后端分离是非常常见的，那么在前后端分离的场景中，跨域的问题是我们必须要解决的，当然在本地开发时，我们可以使用webpack/dev-serve/proxy配置，那么部署环境我们应该怎么配置那？或许你会说可以让后台的小伙伴配置一下，但是作为一个合格的前端人员，我们也要有自己解决问题的能力，这也是我写这篇文章的原因之一，利用mginx我们完全可以实现跨域。

注意事项

当Access-Control-Allow-Credentials设置为true时，Access-Control-Allow-Origin不能设置为*，必须设置为具体的域名，如果有多个域名可以设置一个白名单，然后再判断要跨域的请求是否在白名单中，如果在白名单中，那么放行请求。

• 简单版（单个origin）

       location ^~/api/ {
            proxy_pass  http://127.0.0.1:8081/;

            # 为HEAD|GET|POST请求方式设置请求头
            if ($request_method ~* 'HEAD|GET|POST'){
                #设置请求源,这里设置的允许[http://127.0.0.1:8080]跨域
                add_header 'Access-Control-Allow-Origin' 'http://127.0.0.1:8080';                
                #设置允许携带凭证，即XHR请求允许携带cookie
                add_header 'Access-Control-Allow-Credentials' 'true';
            }

            # 允许跨域预检
            if ($request_method = 'OPTIONS') {
                add_header 'Access-Control-Allow-Origin' 'http://127.0.0.1:8080';
                add_header 'Access-Control-Allow-Credentials' 'true';
                add_header 'Access-Control-Allow-Headers' 'Content-Type,Access-Control-Allow-Headers,Content-Length,Accept,Authorization,X-Requested-With';
                add_header 'Access-Control-Allow-Methods' 'PUT,POST,GET,DELETE,OPTIONS';
                # add_header 'Access-Control-Max-Age' 1728000;
                # add_header 'Content-Type' 'text/plain charset=UTF-8';
                # add_header 'Content-Length' 0; 
                return 204;
            }
        }

• 白名单版(支持多个origin)

        location ^~/api/ {
            proxy_pass  http://127.0.0.1:8081/;

            # 设置参数$cors默认值为空字符串
            set $cors '';
            # $http_origin: 获取http请求header中的origin
            if ( $http_origin ~* 'http://127\.0\.0\.1:(8080|8081|8082)') {     
                #通过正则表达式设置白名单，通过白名单的则允许跨域，实际开发中这里要改成你自己的规则，以来匹配你自己的origin
                #例如： $http_origin ~* 'http(s)?://(yousite1|yousite2)\.com'
                set $cors '1';
            }

            # 白名单检查通过
            if ($cors = '1') {               
                add_header 'Access-Control-Allow-Origin' $http_origin;
                add_header 'Access-Control-Allow-Credentials' 'true';
            }
            if ($request_method = 'OPTIONS') {
                add_header 'Access-Control-Allow-Origin' $http_origin;
                add_header 'Access-Control-Allow-Credentials' 'true';
                add_header 'Access-Control-Allow-Headers' 'Content-Type,Access-Control-Allow-Headers,Content-Length,Accept,Authorization,X-Requested-With';
                add_header 'Access-Control-Allow-Methods' 'PUT,POST,GET,DELETE,OPTIONS';
                return 204;
            }
        }

本文章中给出的示例，作者已验证其可行性（windows平台），确保可以正确运行。

说明

• $http_xxx：取请求header中的xxx的值，例如:$http_origin。
• $arg_xxx：取请求行中的xxx参数的值,例如：$arg_param1。
• $cookie_xxx:取cookie中ckkoie名为xxx的值，例如：$cookie_user。

参考链接

Access-Control-Allow-Origin
Access-Control-Allow-Credentials
Access-Control-Allow-Headers
Access-Control-Allow-Methods