मैं NGINX में Access-Control-Allow-Origin कैसे जोड़ूँ?

Question

मैं एक्सेस-कंट्रोल-अनुमति-मूल हेडर कैसे सेट कर सकता हूं ताकि मैं अपने मुख्य डोमेन पर अपने उपडोमेन से वेब-फोंट का उपयोग कर सकूं?

---

टिप्पणियाँ:

आपको HTML5BP सर्वर के अधिकांश HTTP सर्वरों के लिए इसके और अन्य हेडर के उदाहरण मिलेंगे। कन्फिग्स प्रोजेक्ट्स https://github.com/h5bp/server-configs

Comments

आह अंत में उत्तर स्थान मिला / {add_header अभिगम-नियंत्रण-अनुमति-उत्पत्ति "*"; }

— क्रिस मैककी

ng4free.com/…

— जयदीप गोदालिया

Answer 1

Nginx को http://wiki.nginx.org/NginxHttpHeadersModule (उबंटू पर डिफ़ॉल्ट और कुछ अन्य लिनक्स डिस्ट्रोस) के साथ संकलित किया जाना है । तब आप ऐसा कर सकते हैं

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

Comments

यदि आप अपाचे पर एक ही समाधान लागू करना चाहते हैं, तो इस निर्देश का पालन करें: stackoverflow.com/questions/11616306/…

— camilo_u

यह मॉड्यूल डिफ़ॉल्ट रूप से (कम से कम उबंटू पर) संकलित लगता है।

— स्टीव बेनेट

अमेजन लाइनक्स रेपो पर डिफ़ॉल्ट रूप से संकलित

— रॉस

हमें किस फ़ाइल और स्थान पर यह निर्देश देना चाहिए?

— सुमित अरोरा

यह मेरे लिए काम नहीं करता है।

— नेगनेक्स

Answer 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-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/

अन्य वेब सर्वरों के लिए पुष्टि करता है http://enable-cors.org/server.html

Comments

हर स्थान के लिए इन पंक्तियों को दोहराने का कोई तरीका नहीं है? क्या हम इसे सर्वर {} ब्लॉक के नीचे रख सकते हैं?

— जियोयर्स

@geoyws (@ I के बिना एक सूचना नहीं मिली); आप इसे स्थान से ऊपर रख सकते हैं, यह ठीक है :)

— क्रिस मैककी

ऐक्सेस-कंट्रोल-

— एक्सपोज

कृपया ifnginx में उपयोग करने से बचें - यहां तक ​​कि आधिकारिक मैनुअल भी इसे हतोत्साहित करता है ।

— समुच्चय

मैं यह जोड़ना चाहूंगा कि alwaysसभी के लिए विकल्प जोड़ना उपयोगी है add_headerताकि हेडर को गैर-200 प्रतिक्रियाओं के लिए भी जोड़ा जाए। चूंकि nginx 1.7.5: nginx.org/en/docs/http/ngx_http_headers_module.html

— Mitar

Answer 3

यहाँ वह लेख है जो मैंने लिखा था जो GET | POST के लिए कुछ दोहराव से बचा है। यह आपको Nginx में CORS के साथ जाना चाहिए।

nginx अभिगम नियंत्रण मूल की अनुमति देते हैं

यहाँ पोस्ट से नमूना स्निपेट दिया गया है:

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
    ....
  }
}

Comments

एसएफ नीति के अनुसार आपको पोस्ट में जानकारी को कॉपी करना होगा, न कि केवल इसे लिंक करना होगा। वेबसाइट किसी भी समय गायब हो सकती हैं, जो जानकारी का नुकसान होगा।

— टिम

वैध बिंदु @tim, कोड को शामिल करने के लिए अद्यतन किया गया

— 22

स्थिति कोड का उपयोग करने पर विचार करें 204 No contentक्योंकि यह अधिक उपयुक्त लगता है।

— स्लाव फोमिन II

Answer 4

सबसे पहले, मुझे कहना है कि @hellvinz उत्तर मेरे लिए काम कर रहा है:

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

हालाँकि, मैंने इस प्रश्न का उत्तर एक अलग उत्तर के साथ देने का फैसला किया है क्योंकि मैं केवल इस समाधान को प्राप्त करने में कामयाब रहा, जो लगभग दस और घंटों के समाधान के लिए काम कर रहा है।

ऐसा लगता है कि Nginx डिफ़ॉल्ट रूप से किसी भी (सही) फ़ॉन्ट MIME प्रकार को परिभाषित नहीं करता है। का पालन करके इस tuorial मैं मैं निम्नलिखित जोड़ सकता है पाया:

application/x-font-ttf           ttc ttf;
application/x-font-otf           otf;
application/font-woff            woff;
application/font-woff2           woff2;
application/vnd.ms-fontobject    eot;

मेरी etc/nginx/mime.typesफाइल पर। जैसा कि कहा गया है, उपरोक्त समाधान ने तब काम किया।

Comments

मैं आमतौर पर लोगों को H5BP github.com/h5bp/server-configs-nginx/blob/master/mime.types :) पर माइम टाइप फ़ाइल की जांच करने के लिए इशारा करूंगा

— क्रिस मैककी

Answer 5

Nginx का पारंपरिक add_header निर्देश 4xx प्रतिक्रियाओं के साथ काम नहीं करता है। जैसा कि हम अभी भी उनके लिए कस्टम हेडर जोड़ना चाहते हैं, हमें और अधिक_सेट_हेडर्स निर्देश का उपयोग करने में सक्षम होने के लिए ngx_headers_more मॉड्यूल को स्थापित करने की आवश्यकता है, जो 4xx प्रतिक्रियाओं के साथ भी काम करता है।

sudo apt-get install nginx-extras

फिर nginx.conf फ़ाइल में अधिक_सेट_हेडर्स का उपयोग करें , मैंने नीचे अपना नमूना चिपकाया है

server {
    listen 80;
    server_name example-site.com;
    root "/home/vagrant/projects/example-site/public";

    index index.html index.htm index.php;

    charset utf-8;

    more_set_headers 'Access-Control-Allow-Origin: $http_origin';
    more_set_headers 'Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE, HEAD';
    more_set_headers 'Access-Control-Allow-Credentials: true';
    more_set_headers 'Access-Control-Allow-Headers: Origin,Content-Type,Accept,Authorization';

    location / {
        if ($request_method = 'OPTIONS') {
            more_set_headers 'Access-Control-Allow-Origin: $http_origin';
            more_set_headers 'Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE, HEAD';
            more_set_headers 'Access-Control-Max-Age: 1728000';
            more_set_headers 'Access-Control-Allow-Credentials: true';
            more_set_headers 'Access-Control-Allow-Headers: Origin,Content-Type,Accept,Authorization';
            more_set_headers 'Content-Type: text/plain; charset=UTF-8';
            more_set_headers 'Content-Length: 0';
            return 204;
        }
        try_files $uri $uri/ /index.php?$query_string;
    }

    location = /favicon.ico { access_log off; log_not_found off; }
    location = /robots.txt  { access_log off; log_not_found off; }

    access_log off;
    error_log  /var/log/nginx/example-site.com-error.log error;

    sendfile off;

    client_max_body_size 100m;

    location ~ \.php$ {
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
        fastcgi_pass unix:/var/run/php5-fpm.sock;
        fastcgi_index index.php;
        include fastcgi_params;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        fastcgi_intercept_errors off;
        fastcgi_buffer_size 16k;
        fastcgi_buffers 4 16k;
    }

    location ~ /\.ht {
        deny all;
    }
}

Answer 6

कुछ मामलों में आपको सभी HTTP प्रतिक्रिया कोड को कवर करने के लिए add_headerनिर्देशों का उपयोग करने की आवश्यकता होती है ।always

location / {
    add_header 'Access-Control-Allow-Origin' '*' 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)। पैरामीटर मान में चर हो सकते हैं।

Answer 7

मेरे मामले में, रेल 5 का उपयोग करते हुए, एकमात्र कार्य समाधान rack-corsमणि जोड़ना रहा है । इस तरह:

in / जेमफाइल

# Gemfile
gem 'rack-cors'

in 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-n-cors

Comments

यह कैसे मदद करता है nginx स्थिर फ़ाइलों की सेवा?

— वाल्फ

मैं रेलगाड़ी 5 एप्लिकेशन की सेवा करने के लिए एक रिवर्स प्रॉक्सी के रूप में nginx का उपयोग कर रहा था। यह एक विशेष मामला है जहां कॉर्ज़ प्रतिबंध नगनेक्स से नहीं बल्कि इसके पीछे मूल रेल ऐप से आ रहा था।

— user9869932