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

200
dwww 2017-04-07 07:36.

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ì?

6 answers

349
sideshowbarker 2017-04-07 15:08.

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

6
dotNET 2019-07-18 10:18.

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 .

4
Really Nice Code 2019-04-13 03:38.

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: *");
2
Stuart Aitken 2018-12-24 03:06.

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....
    )}
2
volna 2019-01-28 06:03.

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"--source 9001bằng--source "number of your port +1"

2
Varnit Rohilla 2020-08-24 03:29.

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

Related questions

MORE COOL STUFF

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett đã bất chấp những lời khuyên hẹn hò điển hình khi cô gặp chồng mình.

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Michael Sheen là một diễn viên phi lợi nhuận nhưng chính xác thì điều đó có nghĩa là gì?

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Ngôi sao của Hallmark Colin Egglesfield chia sẻ về những cuộc gặp gỡ với người hâm mộ ly kỳ tại RomaDrama Live! cộng với chương trình INSPIRE của anh ấy tại đại hội.

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Bạn sẽ phải phủi sạch đầu đĩa Blu-ray hoặc DVD để xem tại sao Northern Exposure trở thành một trong những chương trình nổi tiếng nhất của thập niên 90.

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

8 công dụng tuyệt vời của Baking Soda và Giấm

8 công dụng tuyệt vời của Baking Soda và Giấm

Bạn biết đấy, hai sản phẩm này là nguồn điện để làm sạch, riêng chúng. Nhưng cùng với nhau, chúng có một loạt công dụng hoàn toàn khác.

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Thủy điện rất cần thiết cho lưới điện của Hoa Kỳ, nhưng nó chỉ tạo ra năng lượng khi có nước di chuyển. Bao nhiêu nhà máy thủy điện có thể gặp nguy hiểm khi các hồ và sông cạn kiệt?

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Tóc tỉa từ các tiệm và các khoản quyên góp cá nhân có thể được tái sử dụng như những tấm thảm thấm dầu và giúp bảo vệ môi trường.

Trong Saturday Night Live, The Bachelor is Bland và Tina Fey trở lại với vai 'Crazy' Sarah Palin

Trong Saturday Night Live, The Bachelor is Bland và Tina Fey trở lại với vai 'Crazy' Sarah Palin

Sau khi Sarah Palin tán thành Donald Trump vào đầu tuần này, gần như không thể tránh khỏi việc Tina Fey sẽ trở lại Saturday Night Live để thăm lại ấn tượng Palin cổ điển của cô. Và Fey chắc chắn đã không làm thất vọng, cô ấy đã đưa ra một lời khen ngợi không hề nhẹ về bài phát biểu chứng thực Iowa quanh co và khó hiểu của Palin trong khi Trump của Darrell Hammond đưa ra bình luận xuyên suốt.

Đây có phải là sự khởi đầu cho sự kết thúc của việc giam giữ Brittney Griner?

Đây có phải là sự khởi đầu cho sự kết thúc của việc giam giữ Brittney Griner?

Brittney Griner (r.) Ngay từ đầu, thân phận của Brittney Griner đã là tình huống con tin Mỹ độc nhất trong lịch sử hiện đại.

Tom Brady là bộ tứ vệ đầu tiên cuối cùng có thể giúp Julio Jones có hơn 10 lần chạm bóng trong một mùa giải

Tom Brady là bộ tứ vệ đầu tiên cuối cùng có thể giúp Julio Jones có hơn 10 lần chạm bóng trong một mùa giải

Chúng ta có thể thấy nhiều hơn nữa về một Julio Jones khỏe mạnh trong khu vực cuối năm nay. John Parker Wilson, Greg McElroy, A.

Đó phải là Đức

Đó phải là Đức

Đối với đội tuyển Anh, không có kẻ thủ ác nào lớn hơn Hầu hết các cổ động viên Anh, nếu không muốn nói là tất cả, hẳn sẽ phải gật gù khi tiếng còi mãn cuộc của trận bán kết lượt về W Euro 2022 vang lên. Bởi vì nó báo hiệu rằng Đức sẽ chờ đợi ở Wembley trong trận chung kết với Anh và là điều duy nhất giữa Anh và chiếc cúp lớn đầu tiên của đội tuyển nữ.

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Rothschild's luggage got lost, but luckily she has an incredible closet to shop: Sister Paris Hilton's!

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa. Từ Hollywood đến New York và mọi nơi ở giữa, hãy xem các ngôi sao yêu thích của bạn đang làm gì!

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

Các nhà điều tra đang xem xét liệu nhóm và nghi phạm có biết nhau trước vụ tấn công hay không

Thanh thiếu niên, Gia đình Florida Hội đồng quản trị trường học về Luật 'Không nói đồng tính': 'Buộc chúng tôi tự kiểm duyệt'

Thanh thiếu niên, Gia đình Florida Hội đồng quản trị trường học về Luật 'Không nói đồng tính': 'Buộc chúng tôi tự kiểm duyệt'

Vụ kiện, nêu tên một số học khu, lập luận rằng dự luật "Không nói đồng tính" được ban hành gần đây của Florida "có hiệu quả im lặng và xóa bỏ học sinh và gia đình LGBTQ +"

Đường băng hạ cánh

Đường băng hạ cánh

Cuối hè đầu thu là mùa hoài niệm. Những chiếc đèn đường chiếu ánh sáng của chúng qua những con đường đẫm mưa, và những chiếc lá dưới chân - màu đỏ cam tắt trong bóng chạng vạng - là lời nhắc nhở về những ngày đã qua.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Vào năm 2021, tôi khuyến khích bạn suy nghĩ lại mọi thứ bạn biết về khách hàng mà bạn phục vụ và những câu chuyện bạn kể cho họ. Lùi lại.

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Vào ngày sinh nhật thứ 9 của Felix The Cat, tôi nhớ về một trong những mất mát lớn nhất trong cuộc đời trưởng thành của tôi - Sophie của tôi vào năm 2013. Tôi đã viết bài luận này và chia sẻ nó trên nền tảng này một thời gian ngắn vào năm 2013.

Khi bạn không thể trở thành người mà Internet muốn bạn trở thành

Khi bạn không thể trở thành người mà Internet muốn bạn trở thành

Tôi ghét từ "tàu đắm". Mọi người cảm thấy thoải mái trong la bàn đạo đức của riêng mình, và khi làm như vậy, họ thấy mình vượt qua sự phán xét.

Language