Không có tiêu đề 'Access-Control-Allow-Origin' xuất hiện trên lỗi tài nguyên được yêu cầu

Tôi đang cố gắng lấy nguồn cấp dữ liệu của một trang web tin tức. Tôi nghĩ tôi sẽ sử dụng API nguồn cấp dữ liệu của google để chuyển đổi nguồn cấp dữ liệu feedburner thành json. Url sau sẽ trả về 10 bài đăng từ nguồn cấp dữ liệu, ở định dạng json. http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&q=http://feeds.feedburner.com/mathrubhumi

Tôi đã sử dụng mã sau để lấy nội dung của url trên

$.ajax({
  type: "GET",
  dataType: "jsonp",
  url: "http://ajax.googleapis.com/ajax/services/feed/load",
  data: {
    "v": "1.0",
    "num": "10",
    "q": "http://feeds.feedburner.com/mathrubhumi"
  },
  success: function(result) {
    //.....
  }
});

nhưng nó không hoạt động và tôi gặp lỗi sau

XMLHttpRequest không thể tải http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&q=http%3A%2F%2Ffeeds.feedburner.com%2Fmathrubhumi . 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 ' do đó không được phép truy cập.

Làm cách nào để sửa lỗi này?

Tôi tin rằng điều này có thể là do Chrome không hỗ trợ localhostđể vượt qua Access-Control-Allow-Origin- xem vấn đề Chrome

Để Chrome gửi Access-Control-Allow-Origintiêu đề, chỉ cần đặt bí danh máy chủ cục bộ của bạn trong tệp / etc / hosts của bạn tới một số miền khác, chẳng hạn như:

127.0.0.1   localhost yourdomain.com

Sau đó, nếu bạn truy cập tập lệnh của mình bằng cách sử dụng yourdomain.comthay vì localhost, cuộc gọi sẽ thành công.

Nếu bạn sử dụng trình duyệt Google Chrome, bạn có thể hack bằng một tiện ích mở rộng.

Bạn có thể tìm thấy một tiện ích mở rộng của Chrome sẽ sửa đổi nhanh các tiêu đề CORS trong ứng dụng của bạn. Rõ ràng, đây chỉ là Chrome, nhưng tôi thích rằng nó hoạt động mà không có thay đổi nào ở bất kỳ đâu.

Bạn có thể sử dụng nó để gỡ lỗi ứng dụng của mình trên máy cục bộ (nếu mọi thứ hoạt động trong phiên bản sản xuất).

Lưu ý : Nếu URL bị hỏng, tên tiện ích mở rộng là Access-Control-Allow-Origin: * . Tôi khuyên bạn nên tắt tiện ích mở rộng này khi bạn không làm việc với nội dung của mình, vì ví dụ: youtube không hoạt động với tiện ích mở rộng này.

Hãy thử điều này - đặt lệnh gọi Ajax bằng cách thiết lập tiêu đề như sau:

var uri = "http://localhost:50869/odata/mydatafeeds"
$.ajax({
    url: uri,
    beforeSend: function (request) {
        request.setRequestHeader("Authorization", "Negotiate");
    },
    async: true,
    success: function (data) {
        alert(JSON.stringify(data));
    },
    error: function (xhr, textStatus, errorMessage) {
        alert(errorMessage);
    }                
});

Sau đó, chạy mã của bạn bằng cách mở Chrome bằng dòng lệnh sau:

chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security

Chỉ FYI, tôi nhận thấy thông tin này từ tài liệu jQuery mà tôi tin rằng áp dụng cho vấn đề này:

Do các hạn chế về bảo mật của trình duyệt, hầu hết các yêu cầu "Ajax" phải tuân theo cùng một chính sách nguồn gốc ; yêu cầu không thể truy xuất thành công dữ liệu từ một miền, miền phụ, cổng hoặc giao thức khác.

Tôi không thể thay đổi tệp máy chủ lưu trữ như @thanix, nhưng phần mở rộng được đề cập bởi @dkruchok đã giải quyết được vấn đề.

Chrome không cho phép bạn tích hợp hai máy chủ cục bộ khác nhau, đó là lý do tại sao chúng tôi gặp lỗi này. Bạn chỉ cần bao gồm gói Microsoft Visual Studio Web Api Core từ trình quản lý nuget Và thêm hai dòng mã trong dự án WebApi của bạnWebApiConfig.cs tệp .

var cors = new EnableCorsAttribute("*", "*", "*");
config.EnableCors(cors);

Sau đó, tất cả đã xong.

Nếu dịch vụ khởi động mùa xuân của nó đang gọi. bạn có thể xử lý nó bằng cách sử dụng mã dưới đây.

@Bean
public WebMvcConfigurer corsConfigurer() {
    return new WebMvcConfigurerAdapter() {
        @Override
        public void addCorsMappings(CorsRegistry registry) {
            registry.addMapping("/**")
                    .allowedOrigins("*")
                    .allowedMethods("GET", "POST", "PUT", "DELETE", "HEAD", "OPTIONS")
                    .allowedHeaders("*", "Access-Control-Allow-Headers", "origin", "Content-type", "accept", "x-requested-with", "x-requested-by") //What is this for?
                    .allowCredentials(true);
        }
    };
}

Để phát triển, bạn có thể sử dụng https://cors-anywhere.herokuapp.com , để sản xuất tốt hơn nên thiết lập proxy của riêng bạn

async function read() {
   let r= await (await fetch('https://cors-anywhere.herokuapp.com/http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&q=http://feeds.feedburner.com/mathrubhumi')).json();
   console.log(r);
}

read();

cors unblock hoạt động tốt cho chrome 78 [COrs unb] [1] https://chrome.google.com/webstore/detail/cors-unblock/lfhmikememgdcahcdlaciloancbhjino

nó là một plugin cho google chrome có tên là "cors unblock"

Tóm tắt: Không còn lỗi CORS bằng cách thêm tiêu đề 'Access-Control-Allow-Origin: *' vào các yêu cầu web cục bộ và từ xa khi được bật

Tiện ích mở rộng này cung cấp quyền kiểm soát đối với XMLHttpRequest và các phương thức tìm nạp bằng cách cung cấp tiêu đề "access-control-allow-origin" và "access-control-allow-methods" tùy chỉnh cho mọi yêu cầu mà trình duyệt nhận được. Người dùng có thể bật và tắt tiện ích mở rộng từ nút trên thanh công cụ. Để sửa đổi cách thay đổi các tiêu đề này, hãy sử dụng các mục menu ngữ cảnh nhấp chuột phải. Bạn có thể tùy chỉnh phương pháp nào được phép. Tùy chọn mặc định là cho phép các phương thức 'GET', 'PUT', 'POST', 'DELETE', 'HEAD', 'OPTIONS', 'PATCH'. Bạn cũng có thể yêu cầu tiện ích mở rộng không ghi đè các tiêu đề này khi máy chủ đã điền chúng.

tốt, một cách khác là sử dụng proxy cors, bạn chỉ cần thêm https://cors-anywhere.herokuapp.com/ trước URL của bạn. vì vậy URL của bạn sẽ giống như https://cors-anywhere.herokuapp.com/http : //ajax.googleapis.com/ajax/services/feed/load .

Máy chủ proxy nhận http://ajax.googleapis.com/ajax/services/feed/load từ URL ở trên. Sau đó, nó thực hiện yêu cầu nhận được phản hồi của máy chủ đó. Và cuối cùng, proxy áp dụng

Access-Control-Allow-Origin: *

cho phản hồi ban đầu đó.

Giải pháp này là tuyệt vời vì nó hoạt động trong cả phát triển và sản xuất. Tóm lại, bạn đang tận dụng thực tế rằng chính sách cùng nguồn gốc chỉ được triển khai trong giao tiếp giữa trình duyệt với máy chủ. Có nghĩa là nó không cần phải được thực thi trong giao tiếp giữa máy chủ và máy chủ!

bạn có thể đọc thêm về giải pháp tại đây về Phương tiện 3 cách để khắc phục lỗi CORS

Vui lòng sử dụng @CrossOrigintrên backendsidebộ điều khiển khởi động trong Spring (cấp lớp hoặc cấp phương thức) vì giải pháp cho 'No 'Access-Control-Allow-Origin'tiêu đề lỗi Chrome có trên tài nguyên được yêu cầu. '

Giải pháp này 100% hiệu quả với tôi ...

Ví dụ: Cấp độ lớp

@CrossOrigin
@Controller
public class UploadController {

----- HOẶC LÀ -------

Ví dụ: Mức phương pháp

@CrossOrigin(origins = "http://localhost:3000", maxAge = 3600)
@RequestMapping(value = "/loadAllCars")
    @ResponseBody
    public List<Car> loadAllCars() {


Ref: https://spring.io/blog/2015/06/08/cors-support-in-spring-framework