如何在NGINX中添加Access-Control-Allow-Origin？

如何设置Access-Control-Allow-Origin标头，以便可以在主域中使用子域中的网络字体？

注意：

您可以在HTML5BP服务器配置项目https://github.com/h5bp/server-configs

中找到大多数HTTP服务器的此标头和其他标头的示例

啊终于找到了答案的位置/ {add_header Access-Control-Allow-Origin“ *”; }

#1 楼

Nginx必须使用http://wiki.nginx.org/NginxHttpHeadersModule进行编译（在Ubuntu和其他一些Linux发行版中是默认设置）。然后您可以执行此操作

location ~* \.(eot|ttf|woff|woff2)$ {
    add_header Access-Control-Allow-Origin *;
}

如果您想在apache上实现相同的解决方案，请遵循以下说明：stackoverflow.com/questions/11616306/…

– camilo_u
2013年2月5日在16:46

该模块似乎是默认编译的（至少在Ubuntu上）。

–史蒂夫·贝内特（Steve Bennett）
2014年9月8日下午13:25

也默认在Amazon Linux repo上编译

–罗斯
2015年9月1日21:16在

我们应该把这个位置指令放在哪个文件和位置？

– Sumit Arora
17年1月17日在14:11

它对我不起作用。 Nginx 1.10.0，Ubuntu 16.04

–阿美（Omid Amraei）
17年6月17日在7:04

#2 楼

最新的答案：

#
# Wide-open CORS config for nginx
#
location / {
     if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' '*';
        #
        # Om nom nom cookies
        #
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        #
        # Custom headers and headers various browsers *should* be OK with but aren't
        #
        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
        #
        # Tell client that this pre-flight info is valid for 20 days
        #
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain charset=UTF-8';
        add_header 'Content-Length' 0;
        return 204;
     }
     if ($request_method = 'POST') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
     }
     if ($request_method = 'GET') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
     }
}

源：https://michielkalkman.com/snippets/nginx-cors-open-configuration.html

您可能还希望添加Access-Control-Expose-Headers（与Access-Control-Allow-Headers相同的格式），以便向ajax请求公开您的自定义和/或“非简单”标头。

Access-Control-Expose-Headers (optional) - The XMLHttpRequest 2 object has a 
getResponseHeader() method that returns the value of a particular response 
header. During a CORS request, the getResponseHeader() method can only access 
simple response headers. Simple response headers are defined as follows:

    Cache-Control
    Content-Language
    Content-Type
    Expires
    Last-Modified
    Pragma
 If you want clients to be able to access other headers, you have to use the
 Access-Control-Expose-Headers header. The value of this header is a comma-
 delimited list of response headers you want to expose to the client.

-http：//www.html5rocks.com/en/tutorials/cors/

其他Web服务器的配置http：// enable-cors。 org / server.html

有没有办法不必在每个位置重复这些行？我们可以将其放在服务器{}块下面吗？

–geoyws
2015年10月11日在5:05

@geoyws（没有@我没有收到通知）；您可以将其放在位置上方，没关系:)

–克里斯·麦克基（Chris McKee）
2015年12月17日在15:12

此处缺少访问控制暴露标头

–碎肉
15/12/23在19:45

请避免在Nginx中使用if-即使官方手册也不建议使用。

–aggregate1166877
18年5月22日在10:43

我想补充一点，在所有add_header中添加always选项非常有用，这样也可以为非200响应添加标头。从nginx 1.7.5开始：nginx.org/en/docs/http/ngx_http_headers_module.html

–米塔尔
19-2-27在18:48

#3 楼

这是我写的文章，它避免了GET | POST的某些重复。它应该使您在Nginx中使用CORS。

这是帖子中的示例片段：

server {
  listen        80;
  server_name   api.test.com;


  location / {

    # Simple requests
    if ($request_method ~* "(GET|POST)") {
      add_header "Access-Control-Allow-Origin"  *;
    }

    # Preflighted requests
    if ($request_method = OPTIONS ) {
      add_header "Access-Control-Allow-Origin"  *;
      add_header "Access-Control-Allow-Methods" "GET, POST, OPTIONS, HEAD";
      add_header "Access-Control-Allow-Headers" "Authorization, Origin, X-Requested-With, Content-Type, Accept";
      return 200;
    }

    ....
    # Handle request
    ....
  }
}

根据SF策略，您需要将信息复制到帖子中，而不仅仅是链接到帖子。网站可以随时消失，这将丢失信息。

– Tim
17年4月17日在22:07

有效点@tim，已更新为包含代码

–gansbrest
17-4-17在22:58

考虑使用状态代码204 No content，因为它似乎更合适。

– Slava Fomin II
19年1月21日在11:00

#4 楼

首先，让我说@hellvinz答案对我有用：在花了大约十个小时寻找解决方案后，该解决方案才起作用。通过遵循本教程，我发现可以添加以下内容：

location ~* \.(eot|ttf|woff|woff2)$ {
    add_header Access-Control-Allow-Origin *;
}

到我的etc/nginx/mime.types文件中。如前所述，以上解决方案就可以了。

我通常会指示人们检查H5BP上的MIME类型文件github.com/h5bp/server-configs-nginx/blob/master/mime.types :)

–克里斯·麦克基（Chris McKee）
17年1月11日在17:06

这没有解决我的问题。我对mime.type文件以及/ etc / nginx中的nginx.conf文件进行了更改

–苏拉杰斯瓦拉（Suraj Jeswara）
7月8日4:56

#5 楼

Nginx的传统add_header指令不适用于4xx响应。由于我们仍然想向其添加自定义标头，因此我们需要安装ngx_headers_more模块，以便能够使用more_set_headers指令，该指令也可与4xx响应一起使用。 >然后在nginx.conf文件中使用more_set_headers，我将示例粘贴到下面

sudo apt-get install nginx-extras

#6 楼

在某些情况下，您需要将add_header指令与always一起使用以覆盖所有HTTP响应代码。

location / {
    add_header 'Access-Control-Allow-Origin' '*' always;
}

来自文档：

如果指定always参数（1.7.5），则无论响应代码如何，都将添加标头字段。

如果响应代码等于200、201（ 1.3.10），204、206、301、302、303、304、307（1.1.16、1.0.13）或308（1.13.0）。参数值可以包含变量。

#7 楼

就我而言，使用Rails 5，唯一可行的解决方案是添加rack-cors gem。像这样：/ Gemfile中的

# Gemfile
gem 'rack-cors'

config / initializers / cors.rb中的

# config/initializers/cors.rb
Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins 'localhost:4200'
    resource '*',
      headers: :any,
      methods: %i(get post put patch delete options head)
  end
end

资源：https://til.hashrocket.com/posts/4d7f12b213-rails-5-api-and-cors

这如何帮助Nginx提供静态文件？

–沃尔夫
18-10-3在4:52

我使用nginx作为反向代理来服务Rails 5应用程序。这是一种特殊情况，其中CORS限制不是来自nginx，而是来自其背后的原始Rails App。

–user9869932
18-10-3在10:39

编程黑洞网