CORS là gì?Tạo truy nã vấn CORS bởi XMLHttpRequestCấu hình máy chủ cung ứng CORSHỗ trợ CORS của những framework

Cors là gì? Vai trò của Cors? Nó là 1 trong nhu yếu khôn cùng thịnh hành cùng với các developer web đó là truy truy nã vấn qua API. Tuy nhiên, Việc truy vấn vấn với xử lý tài liệu trường đoản cú API nhiều khi cũng khá trở ngại.

Bạn đang xem: What is cors?

Rất các lập trình sẵn viên yêu cầu đương đầu cùng với những vụ việc tương quan cho CORS. Vậy CORS là gì? Và lý do vì sao chúng ta nên CORS?

CORS là gì?

CORS là 1 nguyên lý được cho phép những tài ngulặng không giống nhau (fonts, Javascript, v.v…) của một website có thể được truy nã vấn từ bỏ tên miền không giống cùng với domain name của trang đó. CORS là viết tắt của từ bỏ Cross-origin resource sharing.

no ‘access-control-allow-origin’ header is present on the requested resource

Đây chính là lỗi CORS policy cơ mà bất cứ lập trình viên như thế nào cũng sẽ gặp gỡ đề xuất. lúc call API cho tới VPS cơ mà không có headerAccess-Control-Allow-Originhoặc giá trị của chính nó không phù hợp lệ thì đã tạo ra lỗi này và không lấy được tài liệu tự API. Cách khắc phục và hạn chế lỗi trên là cần config enableCORSlên để phía client hoàn toàn có thể Gọi được dữ liệu. Các bạn có thể tìm hiểu thêm cách để enable với những ngữ điệu tại đâyEnable CORS on Server

Tại sao bọn họ nên CORS

CORS được xuất hiện là vìsame-origin policy, là một trong những chính sách tương quan mang đến bảo mật được cài đặt vào toàn thể những trình chăm sóc hiện giờ. Chính sách này ngăn ngừa Việc truy cập tài ngulặng của những tên miền khác một phương pháp không có tội vạ.

Ta gồm ví dụ một kịch bạn dạng nlỗi sau:

Quý Khách truy vấn một website tất cả mã độc. Trang website kia sử dụng Javascript nhằm truy vấn tin nhắn Facebook của chúng ta nghỉ ngơi địa chỉhttps://facebook.com/messages.Nếu chúng ta đang singin Facebook từ trước rồi. Nếu không tồn tại same-origin policy, trang web ô nhiễm cơ hoàn toàn có thể dễ chịu lấy dữ liệu của người tiêu dùng và bất kể điều gì bọn chúng muốn.

Same-origin policy đó là để ngăn ngừa phần nhiều kịch bạn dạng nhỏng bên trên nhằm đảm bảo an toàn người tiêu dùng, góp bình an rộng lúc lướt web. Quý khách hàng có thể test trên web console cùng vẫn nhận thấy lỗi ngay:

$.get("https://facebook.com/messages")Access khổng lồ XMLHttpRequest at "https://facebook.com/messages" fromorigin "xxx" has been blocked by CORS policy: No"Access-Control-Allow-Origin" header is present on the requestedresource.Truy cập URL trên tự bất kỳ domain làm sao ngoàifacebook.combạn cũng sẽ nhận được lỗi điều đó. Đó đó là nhờ vào same-origin policy.

Thế nhưng lại vào thế giới website, lập trình viên liên tục nên tiến hành truy hỏi vấn mang lại các domain name không giống, đặc biệt là Lúc thao tác với các API.

Đó là dịp họ đề xuất đếnCORS.CORSsử dụng các HTTPhường. header để “thông báo” mang lại trình phê chuẩn rằng, một ứng dụng website chạy sống origin này (thường xuyên là domain name này) hoàn toàn có thể truy cập được các tài nguyên ổn sinh sống origin không giống (domain name khác).

Một áp dụng web đang triển khai truy vấn HTTPhường. cross-origin ví như nó đề xuất mang đến các tài ngulặng nghỉ ngơi origin khác cùng với origin nó đang hoạt động (khác giao thức, domain name, port). Sự khác biệt về giao thức nghỉ ngơi đó là khác hoàn toàn kiểu dáng nlỗi HTTP cùng với FTPhường chđọng chưa hẳn HTTP. với HTTPS (cho dù các trình chăm chút ko cho phép trộn lẫn những tài ngulặng truy vấn bởi HTTP.. và HTTPS tuy thế sẽ là vụ việc khác, không liên quan cho CORS).


*

Các trường vừa lòng nên đến CORS hết sức thông dụng vào thực tế. Một ví dụ khôn xiết điển hình nlỗi sau: một ứng dụng website chạy sống domainfoo.comvới nó buộc phải tróc nã vấn đếnbar.comđể đưa một vài ba dữ liệu (thường được triển khai vị JavaScript bằng cách sử dụngXMLHttpRequest).

Các trình cẩn thận phần đông setup same-origin policy với tuân thủ nó khôn cùng chặt chẽ. Cài đặt XMLHttpRequest với nhắc cảFetch APIcũng rất nhiều tuân thủ chính sách này. Do kia đa số tróc nã vấn nlỗi nghỉ ngơi trên sẽ không còn nhận được tác dụng gì, trừ lúc máy chủ trả về response tất cả những header CORS phù hợp.

bởi thế, bằng câu hỏi thực hiện CORS, chúng ta có thể địa chỉ câu hỏi giao tiếp trong vận dụng website dễ ợt hơn rất nhiều.

Các tầm nã vấn cần sử dụng CORS

Các truy vấn vấn sau bắt buộc phải thực hiện CORS, theo tiêu chuẩnquốc tế.

Các tróc nã vấn bằng XMLHttpRequest hoặc Fetch API đến một domain không giống.Web fonts truy vấn vấn đến domain khác qua 
fontface của CSS, trong đó website chỉ hoàn toàn có thể áp dụng font dạng True Type nếu được cho phép.

Làm nạm nào nhằm sử dụng CORS

Một hiểu nhầm tương đối phổ biến, độc nhất là cùng với những xây dựng viên bắt đầu làm việc với API lại được làm việc cùng với API của những thương hiệu phệ, tài liệu tương đối đầy đủ, đó là cho rằng CORS là công việc của frontkết thúc. Nhưng thực ra CORS hoàn toàn là công việc của backkết thúc.

Về phía máy chủ, sau thời điểm có được ban bố về bắt đầu của truy tìm vấn, nó rất có thể gạn lọc chưa hẳn hồi truy tìm vấn đó, trả về lỗi hoặc trả về dữ liệu cần thiết. Trong trường phù hợp trả về dữ liệu, máy chủ cần thiết lập các HTTP header sao để cho trình coi ngó hiểu đúng bản chất tầm nã vấn này đã được chấp nhận.

bởi thế, bạn có thể thấy rằng, CORS góp thúc đấy quá trình trao đổi dữ liệu giữa trình coi xét với máy chủ. CORS hoàn toàn không có tương quan gì đến việc trao đổi thẳng thân áp dụng website nhưng mà một máy chủ web khác, ví dụ backover của vận dụng kia truy vấn mang lại tài nguim trên một origin khác, nó cũng ko buộc phải mang đến CORS.

Tạo truy nã vấn CORS bằng XMLHttpRequest

Trong phần này bọn họ đã tìm hiểu bí quyết tạo thành những truy vấn vấn CORS bởi JavaScript. CORS được cung cấp do số đông những trình trông nom hiện đại. Riêng với IE, nó chỉ cung ứng từ IE 8 trsinh hoạt lên cơ mà thôi.

*

Tạo truy tìm vấn

Các trình xem xét Chrome, Firefox, Safari đông đảo sử dụng version new của XMLHttpRequest cho nên câu hỏi truy tìm vấn CORS diễn ra hết sức dễ dãi. IE thì sử dụng XDomainRequest, nó hoạt động tương tự cùng với XMLHttpRequest tuy nhiên có không ít tinh giảm rộng.

Chúng ta rất có thể bắt đầu bằng cách tạo ra những object cần thiết. Dưới đấy là một đoạn code như thế:

const createCORSRequest = (method, url) => let xhr = new XMLHttpRequest(); if ("withCredentials" in xhr) // Kiểm tra XMLHttpRequest object gồm nằm trong tính// withCredentials hay là không // Thuộc tính này chỉ gồm sinh sống XMLHttpRequest2 xhr.open(method, url, true); else if (typeof XDomainRequest != "undefined") // Kiểm tra XDomainRequest // Đây là đối tượng người tiêu dùng chỉ tất cả ở IE và// là phương pháp để IE triển khai truy tìm vấn CORS xhr = new XDomainRequest(); xhr.open(method, url); else xhr = null; return xhr;const request = createCORSRequest("GET", "https://jsonplaceholder.typicode.com/posts/1");if (!request) throw new Error("CORS is not supported");Sau khi tạo nên đối tượng người sử dụng XMLHttpRequest rồi thì họ đề xuất một số trong những sự kiện handler, trong ngôi trường thích hợp này, chúng ta chỉ việc quan tâm 2 eventonloadvàonerrorlà đủ. Trong khi còn một trong những event khác nhưontimeout,onprogresskhông được sử dụng những lắm.

request.onload = () => const responseText = request.responseText; console.log(responseText);request.onerror = () => console.log("Error");Thực ra những trình trông nom không giống nhau lại sở hữu cách cài đặt siêu khác biệt với eventonerror. lấy ví dụ như, Firefox trả về status là 0 vàstatusTextluôn luôn rỗng với đa số lỗi. Ngoài ra, các trình chú tâm cũng hay không có thể chấp nhận được truy vấn đến ngôn từ ví dụ của lỗi sẽ xảy ra, họ chỉ biết rằng đang tất cả lỗi mà thôi.

withCredentials

Mặc định, các truy vấn vấn CORS không gửi hoặc tùy chỉnh cấu hình bất cứ cookie nào bên trên trình chuyên chú. Nếu ý muốn sử dụng cookie vào truy nã vấn đó, họ phải để nằm trong tínhwithCredentialscủa truy vấn vấn bằngtrue:

xhr.withCredentials = true;Tuy nhiên, này cũng mới chỉ là 1 trong những nửa cơ mà thôi. Nửa còn lại trực thuộc về phía sever, chính là HTTPhường headerAccess-Control-Allow-Credentialsphải là true (chúng ta sẽ khám phá ở chỗ sau).

Xem thêm: Địa Hình Karst Là Gì - Nghĩa Của Từ Karst Trong Tiếng Việt

Với giá trịwithCredentialsbằngtrue, cookie sẽ tiến hành auto chế tạo cũng như cấu hình thiết lập trường hợp gồm đánh giá từ bỏ máy chủ. Lưu ý rằng, cookie vào trường vừa lòng này là third-buổi tiệc ngọt cookie cùng vấn đề lưu trữ, truy cập cookie vẫn trọn vẹn thuân theo same-origin policy, vì thế, chúng ta bắt buộc truy cập cookie bằngdocument.cookieđược. Nó hoàn toàn được cách xử trí tự động hóa do trình duyệt.

Gửi truy vấn vấn

Sau Lúc những Việc đang hoàn tất, vấn đề ở đầu cuối bọn họ cần làm là gửi truy vấn vấn đi nữa nhưng thôi:

request.send();Lúc bấy giờ truy vấn vấn sẽ được gửi mang lại máy chủ, với nếu như sever đó gật đầu đồng ý CORS thì nó đang trả về response tương xứng. Hoạt đụng của truy vấn vấn bây giờ hoàn toàn giống với tróc nã vấn có bọn chúng origin thông thường.

Tạo truy nã vấn CORS bởi jQuery

Hàm$.ajaxcủa jQuery có thể được sử dụng cho các truy nã vấn thường thì lẫn truy nã vấn CORS (cookie cũng khá được cung ứng mặc định). Do kia nếu như thực hiện jQuery thì quá trình của lập trình viên cũng tương đối thuận lợi. Tuy nhiên, cần xem xét một vài điều như sau:

Truy vấn CORS của jQuery ko cung cấp object XDomainRequest của IE, họ phải sử dụng thêm plugin để cung ứng vấn đề này.Giá trị$.tư vấn.corssẽ tiến hành gán làtruegiả dụ trình coi sóc cung ứng CORS (với IE đã làfalse). Giá trị này hoàn toàn có thể được áp dụng nhằm soát sổ coi CORS dành được hỗ trợ hay là không.

Dưới đây là một đoạn code thực hiện jQuery để tạo ra truy nã vấn CORS:

$.ajax(type: "GET",url: "https://jsonplaceholder.typicode.com/posts/1",success: data => console.log(data);,error: () => console.log("Error");)

Tạo truy nã vấn CORS bởi Fetch API

Chúng ta cũng có thể thực hiện Fetch API nhằm chế tạo truy hỏi vấn CORS. Tuy nhiên,fetchbắt đầu chỉ mở ra từES6cần nhiều trình ưng chuẩn vẫn chưa cung cấp nó (rõ ràng là IE tất cả những phiên bản rất nhiều ko hỗ trợ).

Lập trình cùng với fetch rất dễ dàng, thậm chí còn còn đơn giản và dễ dàng hơn của cùng với jQuery:

fetch("https://jsonplaceholder.typicode.com/posts/1").then(response => response.json()).then(console.log)

Cấu hình máy chủ hỗ trợ CORS

Đây là phần tinh vi tuyệt nhất, cũng chính là phần quan trọng tốt nhất so với CORS. Như sẽ nhắc đến ở trên, thực tế việc hỗ trợ CORS hay không dựa vào hoàn toàn vào sever chứ đọng không phải client.

Có nhì các loại truy vấn vấn CORS: các loại truy nã vấn “đơn giản” với “không đơn giản”.

Một tầm nã vấn dễ dàng và đơn giản trọn vẹn ko yêu cầu mang lại CORS preflight. Một tróc nã vấn sẽ được hotline là dễ dàng giả dụ nó chấp nhận những điều kiện sau:

Phương thơm thức của truy vấn là 1 trong những loạiGET,HEAD,POST.Giá trị củaContent-Typeđề nghị là 1 trong những trong số những loạiapplication/x-www-form-urlencoded,multipart/form-data,text/plain.Không gồm event handler làm sao với eventXMLHttpRequest.upload.Không sử dụng đối tượngReadableStreamtrong truy tìm vấn.Các HTTPhường header sau bắt buộc khớp:AcceptAccept-LanguageContent-LanguageLast-Event-ID

Những truy nã vấn này được Điện thoại tư vấn là “1-1 giản” do chúng hoàn toàn có thể được xem như là truy nã vấn thông thường từ bỏ trình chăm nom nhưng ko đề xuất cho CORS, y như submit một khung HTML thông thường chẳng hạn.

Những truy vấn vấn chưa phải “đối chọi giản” sẽ là tróc nã vấn không đơn giản, và chúng buộc phải CORS preflight. CORS preflight Tức là trước lúc truy tìm vấn được gửi, nó cần phải gửi một truy tìm vấn trước bằng pmùi hương thứcOPTIONS. Mục đích của tróc nã vấn “preflight” này là nhằm mục tiêu khám nghiệm xem tróc nã vấn đích thực tất cả bình yên để gửi và thừa nhận hay không.

Đối với truy nã vấn đối kháng giản

Một tầm nã vấn CORS đơn giản nhỏng sẽ nhắc tới ở bên trên, hoàn toàn có thể gồm gói tin HTTP.. dạng nhỏng sau:

GET /cors HTTP/1.1Origin: https://api.topdevvn.comHost: api.alice.comAccept-Language: en-USConnection: keep-aliveUser-Agent: Mozilla/...Với những cách thức không giống, gói tin HTTP cũng tương tự điều này. Lưu ý rằng, một truy hỏi vấn CORS hợp lệ luôn luôn luôn có Origin sống vào header. Giá trị của header này trọn vẹn được tùy chỉnh cấu hình auto vì chưng trình chuẩn y, cùng không ai rất có thể đổi khác nó được. Giá trị của header này đang bao gồm scheme (http), domain (api.bob.com) và cổng (trong trường thích hợp cần sử dụng cổng mặc định thì ko đề xuất, ví dụ http dùng cổng 80). Giá trị của header chính là biểu thị nguồn gốc của tróc nã vấn.

Ví dụ, Firefox không có header này cho các truy tìm vấn same origin mà lại Chrome và Safari vẫn thêm header ni Khi truy hỏi vấn same origin tuy thế thực hiện những phương thơm thứcPOST,PUThoặcDELETE. Đây là một diểm nên lưu ý với cáclập trình sẵn viên backkết thúc, vì chưng còn nếu không chú ý hoàn toàn có thể không thêm origin của chính tiện ích vào list các domain name được gật đầu, điều ấy để cho bao gồm truy vấn vấn same origin lại chạm chán lỗi.

Dưới đấy là response của dòng sản phẩm nhà phản hồi cho 1 truy hỏi vấn CORS đúng theo lệ:

Access-Control-Allow-Origin: https://api.topdevvn.comAccess-Control-Allow-Credentials: trueAccess-Control-Expose-Headers: FooBarTất cả những header tương quan mang đến CORS đều phải có phần đầu tiên làAcess-Control-. Ý nghĩa của từng header nhỏng sau:

Access-Control-Allow-Origin(bắt buộc): đó là header đề nghị gồm vào phần đông response cho 1 tầm nã vấn CORS hòa hợp lệ. Nếu không có header này, tróc nã vấn sẽ bị lỗi, cực hiếm của chính nó hoàn toàn có thể là cực hiếm của headerOriginđược gửi lên hoặc*biểu lộ mang đến đông đảo origin.Access-Control-Allow-Credentials(tuỳ chọn): Mặc định, cookie sẽ không còn được thực hiện trong các truy nã vấn CORS. Header này vẫn thể hiện giá trị ngắn gọn xúc tích rằng rất có thể sử dụng cookie hay là không. Giá trị duy nhất của header này làtrue. Nếu không thích áp dụng cookie thì thông thường fan ta đã bỏ header này vào response chứ đọng chưa hẳn đặt cực hiếm nó làfalse. Lưu ý rằng, header này chỉ hoạt động nếu phía client cũng đặt giá trịwithCredentials=truenlỗi vẫn nói ở phần trước.Access-Control-Expose-Headers(tuỳ chọn): Một đối tượng người sử dụng XMLHttpRequest có một phương thơm thứcgetResponseHeader, phương thức này đang trả về giá trị của một header rõ ràng trong response. Với các truy hỏi vấn CORS, thủ tục này chỉ có thể truy vấn được một trong những header đơn giản dễ dàng mà lại thôi. Nếu mong muốn cách tiến hành này rất có thể truy vấn các header rộng, bọn họ buộc phải đến quý giá của header này. Giá trị của header này là một trong những list những header hoàn toàn có thể truy cập được, ngăn cách bằng vết phẩy.

Đối cùng với truy vấn phải preflight

Không bắt buộc truy nã vấn nào thì cũng là đơn giản vị câu hỏi thương lượng dữ liệu giữa trình chăm chú cùng máy chủ ra mắt hết sức đa dạng chủng loại. Các phương thơm thứcPUThayDELETEcũng liên tục được sử dụng. Trong khi loại dữ liệuJSON(Content-Type:application/json) cũng là chọn lựa của tương đối nhiều lập trình viên. Trong gần như ngôi trường hòa hợp điều này, trước khi truy tìm vấn thiết yếu được triển khai thì một tầm nã vấn Gọi là preflight sẽ tiến hành gửi đi trước.

Ở phía frontend, những tầm nã vấn đơn giản và dễ dàng xuất xắc tinh vi rất nhiều trông đã như là nhau. Truy vấn preflight trọn vẹn được triển khai ngầm với trong veo cùng với người dùng. Truy vấn preflight sẽ được gửi đi trước nhằm mục tiêu xác minh xem truy hỏi vấn thực sự có thể thực hiện được hay không.

Sau Khi dành được ý kiến lành mạnh và tích cực, trình chăm sóc đã gửi truy hỏi vấn thực sự. Kết quả của tầm nã vấn preflight có thể được cache nên nó không cần phải triển khai mang đến phần đông truy tìm vấn.

Dưới đó là một gói tin HTTPhường đến truy hỏi vấn preflight:

OPTIONS /cors HTTP/1.1Origin: https://api.topdevvn.comAccess-Control-Request-Method: PUTAccess-Control-Request-Headers: X-Custom-HeaderHost: api.alice.comAccept-Language: en-USConnection: keep-aliveUser-Agent: Mozilla/...Tương từ bỏ nhỏng truy vấn đơn giản, truy vấn này cũng tự động được thêm headerOrigin. Truy vấn preflight sẽ được triển khai bằng phương thứcOPTIONSvới một trong những header quánh thù:

Access-Control-Request-Method: Đây là cách tiến hành HTTP dùng trong truy vấn đích thực. Giá trị của header luôn luôn luôn yêu cầu tất cả, ngay cả khi các thủ tục này cũng là cách thức của một truy vấn vấn đơn giản và dễ dàng.Access-Control-Request-Headers: Đây là danh sách (ngăn cách bởi vệt phẩy) những header được phân phối truy vấn.

Truy vấn preflight là một trong cách để hỏi máy chủ rằng, liệu truy vấn vấn thực sự hoàn toàn có thể triển khai được hay là không. Mà sever phụ thuộc nhị header này để ra quyết định coi gồm đồng ý truy vấn vấn hay không. Nếu đồng ý, máy chủ đang ý kiến nhỏng sau:

Access-Control-Allow-Origin: https://api.topdevvn.comAccess-Control-Allow-Methods: GET, POST, PUTAccess-Control-Allow-Headers: X-Custom-HeaderContent-Type: text/html; charset=utf-8Trong số đó, response rất có thể gồm có header như sau:

Access-Control-Allow-Origin(bắt buộc): Tương từ bỏ như ngôi trường hòa hợp truy nã vấn CORS đơn giản.Access-Control-Allow-Methods(bắt buộc): Là một danh sách (chia cách bởi lốt phẩy) những cách thức HTTP. được gật đầu đồng ý. Dù tầm nã vấn preflight gồm hỏi về một cách thức cụ thể của truy hỏi vấn tiếp theo, cực hiếm của header này trong responses rất có thể bao hàm tất cả các cách làm được đồng ý.Access-Control-Allow-Headers(yêu cầu nếu như truy tìm vấn bao gồm headerAccess-Control-Request-Headers): Là list các header (ngăn cách bởi lốt phẩy) được cung cấp. Tương trường đoản cú nlỗi header trước, giá trị của header này cũng rất có thể bao gồm toàn bộ những header được chấp nhận.Access-Control-Allow-Credentials(tuỳ chọn): Tương từ như ngôi trường thích hợp tầm nã vấn CORS đơn giản.Access-Control-Max-Age(tuỳ chọn): Truy vấn preflight không nhất thiết cần được triển khai cho những tầm nã vấn, nhưng mà kết quả của chính nó có thể cabít được. Giá trị của header này đó là số giây cơ mà quý giá của truy nã vấn preflight rất có thể được cabịt.

Một lúc truy hỏi vấn preflight đã có được bình luận cùng được gật đầu đồng ý, trình xem xét sẽ thực hiện tróc nã vấn thực thụ. Truy vấn lúc này tựa như như tầm nã vấn CORS đơn giản và dễ dàng với quy trình cách xử trí cũng như ý kiến hoàn toàn tương tự như vậy.

Về phía client, ví như vào ngôi trường thích hợp không tiến hành được truy vấn, eventonerrorsẽ tiến hành call. Tuy nhiên, như vẫn nó ngơi nghỉ bên trên, trình để ý cũng cần yếu truy vấn được rất nhiều đọc tin về lỗi kia, chỉ đơn giản là biết bao gồm lỗi nhưng thôi.

Hỗ trợ CORS của những framework

Laravel CORS

khi bọn họ code vài ba ứng dụng bên dưới local mà tất cả connect tới Laravel backed, thì bạn sẽ nhận dòng thông tin error CORS ngay lập tức. Vì vậy bắt buộc tạo nên mộtmiddlewaresau:

$ php artisan make:middleware CorsSau kia update header trongapp/Http/Middleware/Cors.php

header(‘Access-Control-Allow-Origin’, ‘*’) ->header(‘Access-Control-Allow-Methods’, ‘GET, POST, PUT, DELETE, OPTIONS’) ->header(‘Access-Control-Allow-Headers’, ‘X-Requested-With, Content-Type, X-Token-Auth, Authorization’); }}Sau kia, đăng ký middleware trongapp/Http/kernel.php

protected $routeMiddleware = < ‘auth’ => AppHttpMiddlewareAuthenticate::class, ‘auth.basic’ => IlluminateAuthMiddlewareAuthenticateWithBasicAuth::class, ‘guest’ => AppHttpMiddlewareRedirectIfAuthenticated::class, ‘cors’ => AppHttpMiddlewareCors::class, // Nếu bạn muốn nhảy CORS ngẫu nhiên route như thế nào, chỉ việc add middleware này trong route registration. Bên cạnh đó bạn cũng có thể sử dụng packgage ngoại trừ tạibarryvdh/laravel-cors.

CORS Nodejs

Chúng ta sử dụng chiếc code dưới đây để phối một header bên trên response của bạn nhằm nhảy CORS:

res.header("Access-Control-Allow-Origin", "*");Bật CORS đến toàn thể resource bên trên server

app.use(function(req, res, next) res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); next(););Chỉ định tệp tin như thế nào đó

phầm mềm.get("/file", function(req, res) var file = __dirname + "/tệp tin.zip"; res.download(file); // Set disposition and skết thúc it.);lấy ví dụ đầy đủ:

var express = require("express");var app = express();tiện ích.use(function(req, res, next) res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); next(););tiện ích.get("/", function (req, res) var data = "SmartPhone": < "iPhone", "Samsung" > ; res.json(data););tiện ích.get("/file", function(req, res) var tệp tin = __dirname + "/tệp tin.zip"; res.download(file); // Set disposition & skết thúc it.);

Ruby on Rails

Ruby on Rails được cho phép bọn họ cấu hình thiết lập cũng tương tự chuyển đổi những header trong response tương đối dễ ợt, cho nên vì vậy, hy vọng đồng ý truy nã vấn CORS, bạn cũng có thể dễ dàng là làm nhỏng sau:

skip_before_filter :verify_authenticity_tokenbefore_action :cors_preflight_checkafter_action :cors_set_access_control_headersdef cors_set_access_control_headers headers<"Access-Control-Allow-Origin"> = "*" headers<"Access-Control-Allow-Methods"> = "GET, POST" headers<"Access-Control-Max-Age"> = "1728000"enddef cors_preflight_check headers<"Access-Control-Allow-Origin"> = "*" headers<"Access-Control-Allow-Methods"> = "GET, POST" headers<"Access-Control-Allow-Headers"> = "X-Requested-With, X-Prototype-Version" headers<"Access-Control-Max-Age"> = "1728000"end

Django

Với Django họ nên áp dụng thêm một package, đó làDjango CORS headers. Package này để giúp đỡ chúng ta cấu hình thiết lập các header quan trọng cho một truy hỏi vấn CORS, đôi khi đến họ kĩ năng cấu hình URL làm sao được cho phép CORS, URL như thế nào thì không.

Với package này, chúng ta cũng có thể thông số kỹ thuật sao cho chỉ bao gồm API bắt đầu hỗ trợ CORS như sau:

CORS_ORIGIN_ALLOW_ALL = TrueCORS_URLS_REGEX = r"^/api/v1/.*$"Bên cạnh đó còn không ít cấu hình khác nữa, được cho phép bọn họ chỉ gật đầu truy vấn CORS từ 1 vài ba origin khăng khăng chẳng hạn (CORS_ORIGIN_REGEX_WHITELIST). Nội dung cụ thể xin mới các bạn coi ví dụ trên README của package đó.

Flask

Tương từ bỏ nlỗi Django, với Flask, bọn họ cũng phải áp dụng thêm một package, kia làFlask-CORSnew rất có thể đồng ý những truy nã vấn CORS được.

from flask import Flaskfrom flask.ext.cors import CORS, cross_originphầm mềm = Flask(__name__)phầm mềm.config<"SECRET_KEY"> = "The quiông chồng brown fox jumps over the lazy dog"phầm mềm.config<"CORS_HEADERS"> = "Content-Type"cors = CORS(app, resources=r"/foo/*": "origins": "*")

Bài viết liên quan

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *