Cross Origin Resource Sharing (CROS)

1. CORS là gì
2. Các thành phần liên quan của CORS
3. Cách khắc phục
1. Trong nginx:

                - Vào một ngày đẹp trời cũng như bao ngày làm việc khác. Mình được nhận fetch các resource từ API của một domain khác. Thì xảy ra hiện tượng CORS trên trình duyệt báo. Không 1 chút do dự là coppy research và nó đã pass qua. Nên mình chẳng để tâm nó làm cái quái gì trong đó mà trình duyệt chấp nhận. Buồn thay lại tiếp tục lỗi đó lại xảy ra từ 1 dự án khác và cũng như mọi lần search và paste:

#
# Wide-open CORS config for nginx
#
location / {
     if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' '*';
        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,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        #
        # 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-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
     }
     if ($request_method = 'GET') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
     }
}

Nhưng coppy paste đoạn code vào config nginx file mà vẫn không chịu buôn tha cho mình,

nó chỉ từ việc báo cors origin website từ 2 line xuống thành 1.

Và sau đây mình sẽ nói về cái stupid của mình. Do API bên backend viết bằng laravel,

và frontend viết bằng vuejs. Mình đoán 2 dòng thì 1 cái là do cấu hình nginx, 1 line

là do 1 trong 2 thèn vuejs or laravel framework nó prevent CORS này rồi. Và thế rồi, mình

bơi nào là install packed in laravel để pass cors, nào là setting vào header của thèn

 vuejs call lên và trên cuối cùng là vô vọng.

 Bùm !!!. Fairy man hiện ra, con ơi sao con ngốc thế. Sao con lúc đầu kiểm tra nginx

đã cấu hình đúng chưa mà bơi đâu xa thế. Lúc trước con không nhớ coppy chỉnh sửa trong

file nginx thôi sao. Ôi ận hận quá, ngu 1 lần không đáng trách, để lặp lại thì chắc phải 

tự mình cắt tóc như khi Tào Tháo phạm sai lầm. Nói dông dài để giải trí vậy thôi,

nên vào vấn đề chính luôn:

  location / {
                # First attempt to serve request as file, then
                # as directory, then fall back to displaying a 404.
                # try_files $uri $uri/ /index.php;
                try_files $uri $uri/ /index.php$is_args$args;
                # Uncomment to enable naxsi on this location
                # include /etc/nginx/naxsi.rules
        }

trong file nginx default là vậy. Và mình thực hiện xóa nó đi và coppy paste đoạn code 

phía trên.Và nó chỉ pass qua 1 mà không phải 2. Vậy lỗi là do đâu, nào debug:

 
 try_files $uri $uri/ /index.php$is_args$args;

À chính nó âm thầm và lặng lẽ 

Vậy try_files là gì, lỗi này là do mình đã chủ quan don't care tới config trong nginx.

Một lỗ hỗng quá lớn mà không xảy ra sự việc này thì không biết khi nào mới bớt bơi 

tào lao. Và việc khắc phụ cors mình đã khắc phục.Nếu chưa, hoặc muốn đóng góp gì thì

 mọi ngườicomment dưới để giúp đỡ nhau nhé. Còn về chi tiết hay hiểu cơ bản nginx thì

 mình sẽ public ở bài viết tiếp theo nhé