Cố gắng sử dụng tìm nạp và chuyển trong chế độ: no-cors

Tôi có thể đạt được điểm cuối này, http://catfacts-api.appspot.com/api/facts?number=99thông qua Postman và nó trả vềJSON

Ngoài ra, tôi đang sử dụng create-react-app và muốn tránh thiết lập bất kỳ cấu hình máy chủ nào.

Trong mã khách hàng của tôi, tôi đang cố gắng sử dụng fetchđể làm điều tương tự, nhưng tôi gặp lỗi:

Không có tiêu đề 'Access-Control-Allow-Origin' có trên tài nguyên được yêu cầu. Nguồn gốc ' http: // localhost: 3000 ' do đó không được phép truy cập. Nếu phản hồi không rõ ràng đáp ứng nhu cầu của bạn, hãy đặt chế độ của yêu cầu thành 'no-cors' để tìm nạp tài nguyên khi CORS bị tắt.

Vì vậy, tôi đang cố gắng truyền một đối tượng vào Tìm nạp của tôi, đối tượng này sẽ vô hiệu hóa CORS, như sau:

fetch('http://catfacts-api.appspot.com/api/facts?number=99', { mode: 'no-cors'})
  .then(blob => blob.json())
  .then(data => {
    console.table(data);
    return data;
  })
  .catch(e => {
    console.log(e);
    return e;
  });

Thật thú vị, lỗi mà tôi nhận được thực sự là lỗi cú pháp với hàm này. Tôi không chắc thực tế của mình fetchbị hỏng, bởi vì khi tôi xóa đối tượng {mode: 'no-cors'} và cung cấp cho nó một URL khác, nó vẫn hoạt động tốt.

Tôi cũng đã cố gắng vượt qua đối tượng { mode: 'opaque'}, nhưng điều này trả lại lỗi ban đầu từ phía trên.

Tôi tin rằng tất cả những gì tôi cần làm là vô hiệu hóa CORS .. Tôi đang thiếu gì?

mode: 'no-cors'sẽ không làm cho mọi thứ hoạt động một cách kỳ diệu. Trên thực tế, nó khiến mọi thứ trở nên tồi tệ hơn, bởi vì nó có một tác dụng là nói với các trình duyệt, "Chặn mã JavaScript giao diện người dùng của tôi xem nội dung của phần thân phản hồi và tiêu đề trong mọi trường hợp." Tất nhiên bạn hầu như không bao giờ muốn điều đó.

Điều gì xảy ra với các yêu cầu nguồn gốc chéo từ JavaScript giao diện người dùng là các trình duyệt theo mặc định chặn mã giao diện người dùng truy cập các tài nguyên có nguồn gốc chéo. Nếu Access-Control-Allow-Originlà một phản hồi, thì các trình duyệt sẽ nới lỏng việc chặn đó và cho phép mã của bạn truy cập phản hồi.

Nhưng nếu một trang web không gửi Access-Control-Allow-Originphản hồi, mã giao diện người dùng của bạn không thể truy cập trực tiếp vào phản hồi từ trang web đó. Đặc biệt, bạn không thể sửa nó bằng cách chỉ định mode: 'no-cors'(trên thực tế, điều đó sẽ đảm bảo mã giao diện người dùng của bạn không thể truy cập nội dung phản hồi).

Tuy nhiên, một điều sẽ hoạt động: nếu bạn gửi yêu cầu của mình thông qua proxy CORS , như sau:

var proxyUrl = 'https://cors-anywhere.herokuapp.com/',
    targetUrl = 'http://catfacts-api.appspot.com/api/facts?number=99'
fetch(proxyUrl + targetUrl)
  .then(blob => blob.json())
  .then(data => {
    console.table(data);
    document.querySelector("pre").innerHTML = JSON.stringify(data, null, 2);
    return data;
  })
  .catch(e => {
    console.log(e);
    return e;
  });

<pre></pre>

Lưu ý: nếu khi bạn cố gắng sử dụng https://cors-anywhere.herokuapp.com, bạn thấy nó bị lỗi , bạn cũng có thể dễ dàng triển khai proxy của riêng mình cho Heroku chỉ trong 2-3 phút, với 5 lệnh:

git clone https://github.com/Rob--W/cors-anywhere.git
cd cors-anywhere/
npm install
heroku create
git push heroku master

Sau khi chạy các lệnh đó, bạn sẽ kết thúc với máy chủ CORS Anywhere của riêng mình đang chạy tại, ví dụ: https://cryptic-headland-94862.herokuapp.com/ . Vì vậy, thay vì đặt tiền tố URL yêu cầu của bạn bằng https://cors-anywhere.herokuapp.com, hãy đặt tiền tố nó thay thế bằng URL cho trường hợp của riêng bạn; ví dụ: https://cryptic-headland-94862.herokuapp.com/https://example.com .

Tôi có thể đạt điểm cuối này, http://catfacts-api.appspot.com/api/facts?number=99thông qua Postman

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS giải thích lý do tại sao mặc dù bạn có thể truy cập phản hồi với Postman, nhưng các trình duyệt sẽ không cho phép bạn truy cập phản hồi có nguồn gốc chéo từ giao diện người dùng Mã JavaScript chạy trong ứng dụng web trừ khi phản hồi bao gồm Access-Control-Allow-Origintiêu đề phản hồi.

http://catfacts-api.appspot.com/api/facts?number=99 không có Access-Control-Allow-Origintiêu đề phản hồi, vì vậy không có cách nào mã giao diện người dùng của bạn có thể truy cập nguồn gốc chéo của phản hồi.

Trình duyệt của bạn có thể nhận được phản hồi tốt và bạn có thể thấy nó trong Postman và thậm chí trong các devtools của trình duyệt — nhưng điều đó không có nghĩa là trình duyệt sẽ hiển thị nó với mã của bạn. Họ sẽ không, bởi vì nó không có Access-Control-Allow-Origintiêu đề phản hồi. Vì vậy, thay vào đó bạn phải sử dụng proxy để lấy nó.

Proxy thực hiện yêu cầu đến trang web đó, nhận phản hồi, thêm Access-Control-Allow-Origintiêu đề phản hồi và bất kỳ tiêu đề CORS nào khác cần thiết, sau đó chuyển nó trở lại mã yêu cầu của bạn. Và phản hồi có Access-Control-Allow-Originthêm tiêu đề đó là những gì trình duyệt nhìn thấy, vì vậy trình duyệt cho phép mã giao diện người dùng của bạn thực sự truy cập vào phản hồi.

Vì vậy, tôi đang cố gắng chuyển một đối tượng vào Tìm nạp của tôi, điều này sẽ vô hiệu hóa CORS

Bạn không muốn làm điều đó. Để rõ ràng hơn, khi bạn nói rằng bạn muốn “tắt CORS”, có vẻ như bạn thực sự muốn tắt chính sách cùng nguồn gốc . Bản thân CORS thực sự là một cách để làm điều đó - CORS là một cách để nới lỏng chính sách cùng nguồn gốc, không phải là một cách để hạn chế nó.

Nhưng dù sao đi nữa, đúng là bạn có thể - chỉ trong môi trường cục bộ - làm những việc như đặt cờ thời gian chạy trình duyệt của bạn để tắt bảo mật và chạy không an toàn hoặc bạn có thể cài đặt cục bộ tiện ích mở rộng trình duyệt để tuân theo chính sách gốc, nhưng tất cả những điều đó là thay đổi tình hình chỉ cho bạn tại địa phương.

Bất kể bạn thay đổi cục bộ nội dung gì, bất kỳ ai khác đang cố gắng sử dụng ứng dụng của bạn vẫn sẽ gặp phải chính sách nguồn gốc giống nhau và không có cách nào bạn có thể vô hiệu hóa chính sách đó đối với những người dùng ứng dụng của bạn.

Rất có thể bạn sẽ không bao giờ muốn sử dụng mode: 'no-cors'trong thực tế ngoại trừ một số trường hợp hạn chế , và thậm chí sau đó chỉ khi bạn biết chính xác mình đang làm gì và hiệu quả là gì. Đó là bởi vì cài đặt mode: 'no-cors'thực sự nói với trình duyệt là "Chặn mã JavaScript giao diện người dùng của tôi xem xét nội dung của phần thân phản hồi và tiêu đề trong mọi trường hợp." Trong hầu hết các trường hợp, đó thực sự không phải là điều bạn muốn.

Theo như các trường hợp khi bạn sẽ muốn xem xét sử dụng mode: 'no-cors', xem câu trả lời tại gì hạn chế áp dụng đối với phản ứng đục? để biết chi tiết. Ý chính của nó là các trường hợp:

• Trong trường hợp hạn chế khi bạn đang sử dụng JavaScript để đưa nội dung từ nguồn gốc khác vào một <script>, <link rel=stylesheet>, <img>, <video>, <audio>, <object>, <embed>, hoặc <iframe>yếu tố (trong đó hoạt động vì nhúng các nguồn lực giữa các gốc được phép đối với những người) - nhưng đối với một số lý do bạn không' không muốn hoặc không thể làm điều đó chỉ bằng cách đánh dấu tài liệu sử dụng URL tài nguyên làm thuộc tính hrefhoặc srccho phần tử.

• Khi điều duy nhất bạn muốn làm với một tài nguyên là lưu vào bộ nhớ cache. Như đã ám chỉ trong câu trả lời Những hạn chế nào áp dụng cho câu trả lời không rõ ràng? , trên thực tế, tình huống áp dụng là khi bạn đang sử dụng Service worker, trong trường hợp đó, API có liên quan là API lưu trữ bộ nhớ cache .

Nhưng ngay cả trong những trường hợp hạn chế đó, có một số điều quan trọng cần lưu ý; xem câu trả lời tại Những giới hạn nào áp dụng cho câu trả lời không rõ ràng? để biết chi tiết.

Tôi cũng đã cố gắng vượt qua đối tượng { mode: 'opaque'}

Không có mode: 'opaque'chế độ yêu cầu - opaquethay vào đó chỉ là một thuộc tính của phản hồi và các trình duyệt đặt thuộc tính không rõ ràng đó trên các phản hồi từ các yêu cầu được gửi bằng no-corschế độ.

Nhưng tình cờ từ mờ đục là một tín hiệu khá rõ ràng về bản chất của phản hồi mà bạn nhận được: "không rõ ràng" có nghĩa là bạn không thể nhìn thấy nó.

Vì vậy, nếu bạn giống như tôi và đang phát triển một trang web trên localhost, nơi bạn đang cố gắng tìm nạp dữ liệu từ API Laravel và sử dụng nó trong giao diện người dùng Vue của mình và bạn thấy vấn đề này, đây là cách tôi giải quyết nó:

1. Trong dự án Laravel của bạn, chạy lệnh php artisan make:middleware Cors. Điều này sẽ tạo ra app/Http/Middleware/Cors.phpcho bạn.

2. Thêm mã sau vào bên trong handleshàm trong Cors.php:

   return $next($request)
       ->header('Access-Control-Allow-Origin', '*')
       ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
   

3. Trong app/Http/kernel.php, hãy thêm mục nhập sau vào $routeMiddlewaremảng:

   ‘cors’ => \App\Http\Middleware\Cors::class
   

   (Sẽ có các mục nhập khác trong mảng như auth, guestv.v. Ngoài ra, hãy đảm bảo rằng bạn đang thực hiện việc này app/Http/kernel.phpvì cũng có một mục khác kernel.phptrong Laravel)

4. Thêm phần mềm trung gian này vào đăng ký tuyến đường cho tất cả các tuyến đường mà bạn muốn cho phép truy cập, như sau:

   Route::group(['middleware' => 'cors'], function () {
       Route::get('getData', 'v1\[email protected]');
       Route::get('getData2', 'v1\[email protected]');
   });
   

5. Trong Vue front-end, hãy đảm bảo rằng bạn gọi API này trong mounted()hàm chứ không phải trong data(). Đồng thời đảm bảo rằng bạn sử dụng http://hoặc https://với URL trong fetch()cuộc gọi của mình .

Toàn bộ tín dụng cho bài viết blog của Pete Houston .

Giải pháp đơn giản: Thêm phần sau vào đầu tệp php mà bạn đang yêu cầu dữ liệu.

header("Access-Control-Allow-Origin: *");

Giải pháp cho tôi là chỉ làm ở phía máy chủ

Tôi đã sử dụng WebClientthư viện C # để lấy dữ liệu (trong trường hợp của tôi là dữ liệu hình ảnh) và gửi lại cho máy khách. Có thể có điều gì đó rất giống trong ngôn ngữ phía máy chủ đã chọn của bạn.

//Server side, api controller

[Route("api/ItemImage/GetItemImageFromURL")]
public IActionResult GetItemImageFromURL([FromQuery] string url)
{
    ItemImage image = new ItemImage();

    using(WebClient client = new WebClient()){

        image.Bytes = client.DownloadData(url);

        return Ok(image);
    }
}

Bạn có thể điều chỉnh nó theo bất kỳ trường hợp sử dụng nào của riêng bạn. Điểm chính là client.DownloadData()hoạt động mà không có bất kỳ lỗi CORS. Thông thường, các vấn đề về CORS chỉ xảy ra giữa các trang web, do đó bạn có thể thực hiện các yêu cầu 'chéo trang' từ máy chủ của mình.

Sau đó, lệnh gọi tìm nạp React đơn giản như sau:

//React component

fetch(`api/ItemImage/GetItemImageFromURL?url=${imageURL}`, {            
        method: 'GET',
    })
    .then(resp => resp.json() as Promise<ItemImage>)
    .then(imgResponse => {

       // Do more stuff....
    )}

Giải pháp rất dễ dàng (2 phút để cấu hình) là sử dụng gói local-ssl-proxy từnpm

Cách sử dụng khá dễ dàng:
1. Cài đặt gói: npm install -g local-ssl-proxy
2. Trong khi chạy local-servermặt nạ của bạn, nó vớilocal-ssl-proxy --source 9001 --target 9000

PS: Thay thế --target 9000bằng -- "number of your port"và --source 9001bằng--source "number of your port +1"

Nếu bạn đang sử dụng Express làm back-end, bạn chỉ cần cài đặt cors và nhập và sử dụng nó trong app.use (cors ()) ;. Nếu nó không được giải quyết thì hãy thử chuyển đổi cổng. Nó chắc chắn sẽ giải quyết sau khi chuyển đổi cổng