Angular2 to REST WebApi Vấn đề CORS

Question

Tôi đang sử dụng giao diện người dùng góc cạnh2 và phần phụ trợ WebApi. Webapi được CORS kích hoạt

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

và nó hoạt động, vì tôi có các trang web khác nhau (jQuery/Javascript) sử dụng api này. Nhưng với angular2 nó không. Tôi nhận được thông báo sau:

Trả lời yêu cầu preflight không vượt qua kiểm soát kiểm soát truy cập: Không có tiêu đề 'Access-Control-Allow-Origin' trên tài nguyên được yêu cầu.

Có thể có liên quan đến "yêu cầu preflight"?

Answer 1

Thông báo lỗi của bạn cho biết rằng không có Access-Control-Allow-Origin trong thư trả lời cuộc gọi của bạn. Đó là điều cần thiết để kích hoạt CORS cho yêu cầu này. Nó không liên quan đến Angular2.

Điều này được kích hoạt ở phía máy khách bằng cách thêm tiêu đề Origin vào yêu cầu. Bạn có tiêu đề này trong yêu cầu của bạn? Bạn có sử dụng các yêu cầu preflighted trong các ứng dụng khác của bạn không. Xin nhắc lại:

• Yêu cầu đơn giản. Trường hợp sử dụng này được áp dụng nếu chúng tôi sử dụng các phương thức HTTP GET, HEAD và POST. Trong trường hợp phương thức POST, chỉ các loại nội dung có các giá trị sau được hỗ trợ: text/plain, application/x-www-form-urlencoded và multipart/form-data.
• Yêu cầu được yêu cầu trước. Khi trường hợp sử dụng "yêu cầu đơn giản" không áp dụng, yêu cầu đầu tiên (với phương pháp HTTP OPTIONS) được thực hiện để kiểm tra những gì có thể được thực hiện trong bối cảnh yêu cầu miền chéo.

Có thể yêu cầu OPTIONS không được xử lý chính xác ở phía máy chủ (không trả lại tiêu đề chính xác, ...).

Điều gì sẽ được quan tâm là cho chúng tôi biết yêu cầu nào xảy ra lỗi: OPTIONS một hoặc yêu cầu mục tiêu. Bạn có thể có một cái nhìn tại Mạng tab trong DevTools ...

Xem những liên kết này để biết thêm chi tiết về cách CORS hoạt động:

• http://restlet.com/blog/2015/12/15/understanding-and-using-cors/
• http://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api#enable-cors

Hy vọng nó giúp bạn, Thierry

Answer 2

Bạn có bất kỳ tùy chọn nào được đặt trong tệp web.config cho cors? tức là một cái gì đó như <add name="Access-Control-Allow-Origin" value="*"/>

Nếu có, hãy đảm bảo loại bỏ điều đó và chỉ kiểm soát cors thông qua mã.

Câu trả lời here sẽ giúp bạn.

Answer 3

Tôi gặp vấn đề tương tự trong ứng dụng Angular2 của mình. Vấn đề, như đã nêu, là trước khi mọi yêu cầu của khách hàng yêu cầu, yêu cầu pref2 preflight sẽ được gửi đến máy chủ.

loại này yêu cầu có một loại OPTIONS, và đó là nhiệm vụ của máy chủ để gửi lại một phản ứng preflight với trạng thái 200 và các tiêu đề đặt ra cho việc chấp nhận yêu cầu từ khách hàng đó.

Đây là giải pháp của tôi (với tốc):

// Domain you wish to allow 
res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000'); 

// Request methods you wish to allow 
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE'); 

// Request headers you wish to allow 
res.setHeader('Access-Control-Allow-Headers', 'YOUR-CUSTOM-HEADERS-HERE'); 

// Set to true if you need the website to include cookies in requests 
res.setHeader('Access-Control-Allow-Credentials', true); 

// Check if preflight request 
if (req.method === 'OPTIONS') { 
    res.status(200); 
    res.end(); 
} 
else { 
    // Pass to next layer of middleware 
    next(); 
} 

Như bạn thấy, tôi đặt tiêu đề và sau đó lấy nếu loại yêu cầu là OPTIONS. Trong trường hợp đó tôi gửi lại trạng thái 200 và kết thúc phản hồi.

Bằng cách này, khách hàng sẽ được ủy quyền và bạn cũng sẽ có thể đặt tiêu đề tùy chỉnh của mình trong tất cả các yêu cầu.

Answer 4

Tôi biết câu hỏi không yêu cầu mã PHP. Tôi đến đây vì toàn bộ điều preflight và Angular2. Khi tôi nhìn vào câu trả lời của Matteo, tôi nhận ra tại sao yêu cầu tới máy chủ của tôi quay lại với 401. Điều này bởi vì trong trình duyệt preflight không gửi mã ủy quyền và do đó máy chủ quay lại với 401 và trình duyệt cho rằng CORS không được phép . Xin lưu ý rằng mã dưới đây chỉ nên được sử dụng trong máy chủ phát triển trừ khi bạn biết bạn đang làm gì.

Trong PHP bạn có thể làm điều này:

if (strtolower($_SERVER['REQUEST_METHOD']) === 'options') { 
     header('Access-Control-Allow-Origin: ' . $_SERVER['HTTP_ORIGIN']); 
     header('Access-Control-Allow-Methods: POST, GET, OPTIONS'); 
     header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Range, Content-Disposition, Content-Type, Authorization'); 
     header('Access-Control-Allow-Credentials: true'); 
     echo 'Allowed'; 
     exit; 
} 

HOẶC Nginx

if ($request_method = 'OPTIONS') { 
     add_header 'Access-Control-Allow-Origin' '*'; 
     add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; 
     # 
     # Custom headers and headers various browsers *should* be OK with but aren't 
     # 
     add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type'; 
     # 
     # Tell client that this pre-flight info is valid for 20 days 
     # 
     add_header 'Access-Control-Max-Age' 1728000; 
     add_header 'Content-Type' 'text/plain charset=UTF-8'; 
     add_header 'Content-Length' 0; 
     return 204; 
    } 

Nên nhớ bất cứ điều gì tiêu đề bạn đang gửi đến máy chủ, bạn phải được thêm vào khác Access-Control-Allow-Headers danh sách.

Answer 5

Tôi đang làm việc với góc 2 cho front-end và nodeJS (Expressjs) để API

góc 2 đang làm việc dưới localhost: 3000 và hiện đang làm việc trên localhost: 8000

Vấn đề xảy ra khi localhost: 3000 lần thử gọi URL bằng phương thức POST ... Máy chủ expressJS từ chối cuộc gọi vì máy chủ đến từ một máy chủ khác (hoặc cổng)

Để giải quyết sự cố, bạn nên yêu cầu nút js chấp nhận cuộc gọi từ localhost: 3000 máy chủ ...

You can find a library (CORS) to avoid this problem in this link:

Answer 6

Bạn có thể thêm một tiện ích bổ sung trong trình duyệt Firefox của mình. Nó sẽ làm việc trong trình duyệt firefox của bạn như quyến rũ. Cors Everywhere giải quyết vấn đề của tôi. https://addons.mozilla.org/en-US/firefox/addon/cors-everywhere/