Problem with CORS

pavelcorsaghin123 · April 9, 2022, 2:57pm

Chào mọi người, mình có một câu hỏi muốn tham khảo ý kiến của các bạn lập trình viên javascript, mình làm về lập trình mobile, hiện tại đang mắc một vấn đề cả tuần nay chưa tìm ra cách giải quyết, ứng dụng của minh sẽ lấy cái video url từ các trang web và play video ở server của mình! phần lấy link đã ổn nhưng khi gửi request bằng javascript đến các server chứa video để get repsone thì thi thoảng (10-15% các trường hợp) mình gặp phải lỗi này : “XMLHttpRequest cannot load url/của/video No ‘Access-Control-Allow-Origin’ header is present on the requested resource serve/của/mình is therefore not allowed access”. Mình đã tìm hiểu và được biết rằng đây là do server chứa video đã config để chặn các domain lạ không cho truy cập video, mình tìm hiểu thêm thì thấy trên stackoverflow có 1 cách là sử dụng proxy , nhưng căn bản kiến thức về lập trình javascript của mình không có vì vậy mò mẫm rất lâu và khó, vì thế mình muốn hỏi đã có anh em nào trên diễn đàn từng hoặc có thể giải quyết vấn đề này có thể giúp mình không. Thank mọi người đã đọc

nguyenhuuca · January 23, 2017, 10:16am

Nếu server tự viết thì add CORS vào Server luôn.
giống giống như thế này

  @Override
    public void filter(ContainerRequestContext request,
            ContainerResponseContext response) throws IOException {
        response.getHeaders().add("Access-Control-Allow-Origin", "*");
        response.getHeaders().add("Access-Control-Allow-Headers",
                "origin, content-type, accept, authorization");
        response.getHeaders().add("Access-Control-Allow-Credentials", "true");
        response.getHeaders().add("Access-Control-Allow-Methods",
                "GET, POST, PUT, DELETE, OPTIONS, HEAD");

không phải server của mình viết thì có thể dùng JSONP(không theo chuẩn W3C)

pavelcorsaghin123 · January 23, 2017, 10:21am

Không phải server của mình bạn ạ, à phần gửi request bằng javascript luôn, mình lấy được video link rồi gửi đến server và ở đó có 1 player để chạy video đó trên website của mình!

thanhmssl10 · January 23, 2017, 2:47pm

Trước mình làm thì mình làm thêm 1 cái server phụ, xong config cho server đó chấp nhận CORS, xong dùng nó làm proxy trung chuyển request giữa client (javascript) và thằng “domain lạ”
Nên là phần javascript để tạo request không cần sửa gì cả, chỉ cần làm thêm 1 cái server có sửa 1 ít phần header là xong

Kiểu như này:

Còn để bình thường, như này thì sẽ bị lỗi CORS như bạn nói

À mà do đợt đấy là cái origindomain.com mình không được sửa code trên server nhiều nên phải làm vậy còn tốt nhất là làm như này

pavelcorsaghin123 · July 19, 2017, 5:37am

chuẩn rồi bạn ơi, ý tưởng đúng là như vậy nhưng mình không có tí kiến thức về javascript nào nên mình ko config được cái server của mình! bây giờ bạn có thể giúp mình được không :))

Phan_Hoang · January 24, 2017, 11:32am

Uả, mobile thì cần gì quan tâm tới CORS nhỉ (trừ phi bạn dùng ajax để get content).

Còn nếu bạn muốn viết 1 con proxy nhỏ để thêm header vào thì có thể sử dụng:

gist.github.com

https://gist.github.com/iovar/9091078

proxy.php

<?php 

  /*
  * Warning! Read and use at your own risk!
  *
  * This tiny proxy script is completely transparent and it passes 
  * all requests and headers without any checking of any kind.
  * The same happens with JSON data. They are simply forwarded.
  *
  * This is just an easy and convenient solution for the AJAX

This file has been truncated. show original

Có 1 file thôi, thay vì bạn gọi http://request_original thì bạn gọi http://proxy_của_bạn?url=http://request_original
Cũng có khá nhiều http proxy cho phép bạn CORS (đỡ phải dựng, nhưng hình như chứa quảng cáo)

Mấy cái proxy này mình toàn dùng để convert từ http -> https, ảnh ọt vì nhiều khi nhúng http trong https content sẽ không được, hoặc dùng by pass CORS.

Phan_Hoang · January 24, 2017, 11:35am

Một cách khác là sử dụng JSONP

JSON

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function () {
  if (xhr.readyState == 4 && xhr.status == 200) {
    document.getElementById("output").innerHTML = eval('(' + this.responseText + ')').bar;
  };
};

xhr.open("GET", "somewhere.php", true);
xhr.send();

JSONP:

function foo(response) {
  document.getElementById("output").innerHTML = response.bar;
};

var tag = document.createElement("script");
tag.src = 'somewhere_else.php?callback=foo';

document.getElementsByTagName("head")[0].appendChild(tag);

pavelcorsaghin123 · January 25, 2017, 1:46am

Cảm ơn bạn @Phan_Hoang rất nhiều, để mấy hôm tết rảnh mình sẽ nghiền ngẫm phần này

pavelcorsaghin123 · January 25, 2017, 3:50am

@Phan_Hoang: vấn đề của mình như thế này bạn ạ, mình viết ứng dụng cho phép người dùng browsing các trang web video, ứng dụng của mình sẽ get playback link của video rồi sẽ gửi đến 1 cái receiver (thực ra là 1 trang html đặt ở server của mình). Cùng lúc đó các thiết bị có màn hình lớn của người dùng có kết nối internet (chromecast, androidTV, appleTV, internetTV…) sẽ load cái receiver này và chơi video đó trên màn hình lớn! tất cả mọi thứ đều khá ổn nếu không gặp phải vấn đề về cross-origin request khi play live stream videos, những server chứa video mà họ để Access-Control-Allow-Origin:* thì chạy ngon, còn một số server khác thì không như vậy, nó báo lỗi “XMLHttpRequest cannot load url/của/video No ‘Access-Control-Allow-Origin’ header is present on the requested resource serve/của/mình is therefore not allowed access” trong developer console. Trước giờ mình chỉ code android nên động phải phần js này hơi mắc, mình muốn tìm giải pháp để kiểu như đánh lừa trình duyệt để nó bỏ qua cái phần check CORS kia đi và get được info của video để play!