CORS chết người khi http: // localhost là nguồn gốc

Tôi bị mắc kẹt với vấn đề CORS này, mặc dù tôi đã đặt máy chủ (nginx / node.js) với các tiêu đề thích hợp.

Tôi có thể thấy trong ngăn Mạng Chrome -> Tiêu đề phản hồi:

Access-Control-Allow-Origin:http://localhost

Mà nên làm thủ thuật.

Đây là mã mà bây giờ tôi sử dụng để kiểm tra:

var xhr = new XMLHttpRequest();
xhr.onload = function() {
   console.log('xhr loaded');
};
xhr.open('GET', 'http://stackoverflow.com/');
xhr.send();

tôi có

XMLHttpRequest không thể tải http://stackoverflow.com/ . Nguồn gốc http: // localhost không được Access-Control-Allow-Origin cho phép.

Tôi nghi ngờ đó là một vấn đề trong tập lệnh máy khách và không phải cấu hình máy chủ ...

Chrome không hỗ trợ localhost cho các yêu cầu CORS (một lỗi được mở vào năm 2010, được đánh dấu WontFix vào năm 2014).

Để giải quyết vấn đề này, bạn có thể sử dụng một tên miền như lvh.me(chỉ vào 127.0.0.1 giống như localhost) hoặc bắt đầu chrome với --disable-web-securitycờ (giả sử bạn chỉ đang thử nghiệm).

Câu trả lời của Per @ Beau, Chrome không hỗ trợ các yêu cầu CORS của localhost và không có bất kỳ thay đổi nào theo hướng này.

Tôi sử dụng tiện ích cho phép kiểm soát-cho phép xuất xứ: * Tiện ích mở rộng của Chrome để giải quyết vấn đề này. Tiện ích mở rộng sẽ thêm các Tiêu đề HTTP cần thiết cho CORS:

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: "GET, PUT, POST, DELETE, HEAD, OPTIONS"
Access-Control-Expose-Headers: <you can add values here>

Các mã nguồn được công bố trên Github .

Lưu ý rằng phần mở rộng lọc tất cả các URL theo mặc định. Điều này có thể phá vỡ một số trang web (ví dụ: Dropbox). Tôi đã thay đổi nó để chỉ lọc các URL localhost bằng bộ lọc URL sau

*://localhost:*/*

Vấn đề thực sự là nếu chúng tôi đặt -Allow-cho tất cả yêu cầu ( OPTIONS& POST), Chrome sẽ hủy yêu cầu đó. Đoạn mã sau hoạt động với tôi với POSTLocalhost với Chrome

<?php
if (isset($_SERVER['HTTP_ORIGIN'])) {
    //header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}");
    header("Access-Control-Allow-Origin: *");
    header('Access-Control-Allow-Credentials: true');    
    header("Access-Control-Allow-Methods: GET, POST, OPTIONS"); 
}   
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
    if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD']))
        header("Access-Control-Allow-Methods: GET, POST, OPTIONS");         
    if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']))
        header("Access-Control-Allow-Headers:{$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}");

    exit(0);
} 
?>

Chrome sẽ thực hiện các yêu cầu với CORS từ một localhostnguồn gốc tốt. Đây không phải là vấn đề với Chrome.

Lý do bạn không thể tải http://stackoverflow.comlà các Access-Control-Allow-Origintiêu đề không cho phép localhostnguồn gốc của bạn .

Sửa lỗi tiện ích mở rộng nhanh và bẩn của Chrome:

Thay đổi Moesif Orign & CORS

Tuy nhiên, Chrome không hỗ trợ các yêu cầu nguồn gốc chéo từ localhost. Hãy chắc chắn để thêm một tiêu đề Access-Control-Allow-Origincho localhost.

Không có tiện ích mở rộng nào hoạt động cho tôi, vì vậy tôi đã cài đặt một proxy cục bộ đơn giản. Trong trường hợp của tôi https://www.npmjs.com/package/local-cors-proxy Đây là một thiết lập 2 phút:

(từ trang của họ)

npm install -g local-cors-proxy

Điểm cuối API mà chúng tôi muốn yêu cầu có vấn đề về CORS: https://www.yourdomain.ie/movies/list

Bắt đầu Proxy: lcp --proxyUrl https://www.yourdomain.ie

Sau đó, trong mã máy khách của bạn, điểm cuối API mới: http://localhost:8010/proxy/movies/list

Làm việc như một cơ duyên đối với tôi: ứng dụng của bạn gọi proxy, người gọi máy chủ. Không có vấn đề CORS.

Tôi quyết định không chạm vào tiêu đề và thực hiện chuyển hướng ở phía máy chủ và nó như một sự quyến rũ.

Ví dụ dưới đây dành cho phiên bản hiện tại của Angular (hiện là 9) và có thể là bất kỳ khung công tác nào khác sử dụng DevServer của webpack. Nhưng tôi nghĩ rằng nguyên tắc tương tự sẽ hoạt động trên các phụ trợ khác.

Vì vậy, tôi sử dụng cấu hình sau trong tệp proxy.conf.json :

{
  "/api": {
    "target": "http://localhost:3000",
    "pathRewrite": {"^/api" : ""},
   "secure": false
 }
}

Trong trường hợp Angular tôi phục vụ với cấu hình đó:

$ ng serve -o --proxy-config=proxy.conf.json

Tôi thích sử dụng proxy trong lệnh phục vụ, nhưng bạn cũng có thể đặt cấu hình này cho angular.json như thế này:

"architect": {
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "browserTarget": "your-application-name:build",
      "proxyConfig": "src/proxy.conf.json"
    },

Xem thêm:

https://www.techiediaries.com/fix-cors-with-angular-cli-proxy-configuration/

https://webpack.js.org/configuration/dev-server/#devserverproxy