Tại sao Postman không nhận được tiêu đề của No No 'Control-Control-allow-Origin' trên lỗi tài nguyên được yêu cầu khi mã JavaScript của tôi xảy ra?

Mod lưu ý : Câu hỏi này là về lý do tại sao Postman không bị hạn chế CORS theo cách tương tự như XMLHttpRequest. Câu hỏi này không phải là về cách khắc phục lỗi "Không 'Kiểm soát truy cập-Cho phép-Xuất xứ' ...".

Hãy ngừng đăng :

• Cấu hình CORS cho mọi ngôn ngữ / khung dưới ánh mặt trời. Thay vào đó, hãy tìm câu hỏi liên quan đến ngôn ngữ / khung của bạn .
• Dịch vụ bên thứ 3 cho phép yêu cầu phá vỡ CORS
• Tùy chọn dòng lệnh để tắt CORS cho các trình duyệt khác nhau

Tôi cố gắng để làm phép sử dụng JavaScript bằng cách kết nối với RESTful API tích hợp Flask . Tuy nhiên, khi tôi thực hiện yêu cầu, tôi gặp lỗi sau:

XMLHttpRequest không thể tải http: // myApiUrl / đăng nhập . Không có tiêu đề 'Kiểm soát truy cập-Cho phép-Xuất xứ' trên tài nguyên được yêu cầu. Do đó, nguồn gốc 'null' không được phép truy cập.

Tôi biết rằng API hoặc tài nguyên từ xa phải đặt tiêu đề, nhưng tại sao nó hoạt động khi tôi làm theo yêu cầu thông qua phần mở rộng Chrome Postman ?

Đây là mã yêu cầu:

$.ajax({
    type: "POST",
    dataType: 'text',
    url: api,
    username: 'user',
    password: 'pass',
    crossDomain : true,
    xhrFields: {
        withCredentials: true
    }
})
    .done(function( data ) {
        console.log("done");
    })
    .fail( function(xhr, textStatus, errorThrown) {
        alert(xhr.responseText);
        alert(textStatus);
    });

Nếu tôi hiểu đúng, bạn đang thực hiện một XMLHttpRequest cho một tên miền khác với trang của bạn. Vì vậy, trình duyệt đang chặn nó vì nó thường cho phép một yêu cầu có cùng nguồn gốc vì lý do bảo mật. Bạn cần phải làm một cái gì đó khác nhau khi bạn muốn thực hiện một yêu cầu tên miền chéo. Hướng dẫn về cách đạt được điều đó là Sử dụng CORS .

Khi bạn đang sử dụng người đưa thư, họ không bị hạn chế bởi chính sách này. Được trích dẫn từ XMLHttpRequest :

Các trang web thông thường có thể sử dụng đối tượng XMLHttpRequest để gửi và nhận dữ liệu từ các máy chủ từ xa, nhưng chúng bị giới hạn bởi cùng một chính sách gốc. Phần mở rộng không quá giới hạn. Một tiện ích mở rộng có thể nói chuyện với các máy chủ từ xa bên ngoài nguồn gốc của nó, miễn là lần đầu tiên nó yêu cầu quyền truy cập chéo.

CẢNH BÁO: Việc sử dụng Access-Control-Allow-Origin: *có thể làm cho API / trang web của bạn dễ bị tấn công giả mạo yêu cầu chéo trang (CSRF). Hãy chắc chắn rằng bạn hiểu những rủi ro trước khi sử dụng mã này.

Rất đơn giản để giải quyết nếu bạn đang sử dụng PHP . Chỉ cần thêm đoạn mã sau vào đầu trang PHP của bạn để xử lý yêu cầu:

<?php header('Access-Control-Allow-Origin: *'); ?>

Nếu bạn đang sử dụng Node-red, bạn phải cho phép CORS trong node-red/settings.jstệp bằng cách bỏ bình luận các dòng sau:

// The following property can be used to configure cross-origin resource sharing
// in the HTTP nodes.
// See https://github.com/troygoode/node-cors#configuration-options for
// details on its contents. The following is a basic permissive set of options:
httpNodeCors: {
 origin: "*",
 methods: "GET,PUT,POST,DELETE"
},

Nếu bạn đang sử dụng Flask giống như câu hỏi; bạn có đầu tiên để cài đặtflask-cors

$ pip install -U flask-cors

Sau đó, bao gồm các bình Flask trong ứng dụng của bạn.

from flask_cors import CORS

Một ứng dụng đơn giản sẽ trông như:

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.route("/")
def helloWorld():
  return "Hello, cross-origin-world!"

Để biết thêm chi tiết, bạn có thể kiểm tra tài liệu Flask .

Bởi vì
$ .ajax ({type: "POST" - gọi TÙY CHỌN
$ .post ( - Gọi POST

Cả hai đều khác nhau. Người đưa thư gọi "POST" đúng cách, nhưng khi chúng tôi gọi nó, nó sẽ là "TÙY CHỌN".

Đối với dịch vụ web C # - API Web

Vui lòng thêm mã sau vào tệp web.config trong thẻ <system.webServer>. Điều này sẽ làm việc:

<httpProtocol>
    <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
    </customHeaders>
</httpProtocol>

Vui lòng đảm bảo rằng bạn không thực hiện bất kỳ lỗi nào trong cuộc gọi Ajax

jQuery

$.ajax({
    url: 'http://mysite.microsoft.sample.xyz.com/api/mycall',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    type: "POST", /* or type:"GET" or type:"PUT" */
    dataType: "json",
    data: {
    },
    success: function (result) {
        console.log(result);
    },
    error: function () {
        console.log("error");
    }
});

Lưu ý: Nếu bạn đang tìm kiếm tải xuống nội dung từ trang web của bên thứ ba thì điều này sẽ không giúp bạn . Bạn có thể thử đoạn mã sau, nhưng không phải JavaScript.

System.Net.WebClient wc = new System.Net.WebClient();
string str = wc.DownloadString("http://mysite.microsoft.sample.xyz.com/api/mycall");

Áp dụng hạn chế CORS là một tính năng bảo mật được xác định bởi máy chủ và được trình duyệt triển khai .

Trình duyệt xem chính sách CORS của máy chủ và tôn trọng nó.

Tuy nhiên, công cụ Postman không bận tâm về chính sách CORS của máy chủ.

Đó là lý do tại sao lỗi CORS xuất hiện trong trình duyệt, nhưng không xuất hiện trong Postman.

Trong cuộc điều tra dưới đây dưới dạng API, tôi sử dụng http://example.com thay vì http: // myApiUrl / đăng nhập từ câu hỏi của bạn, vì điều này đầu tiên hoạt động.

Tôi giả sử rằng trang của bạn trên http: //my-site.local: 8088 .

Lý do tại sao bạn thấy kết quả khác nhau là Postman:

• đặt tiêu đề Host=example.com(API của bạn)
• KHÔNG đặt tiêu đề Origin

Điều này tương tự như cách gửi yêu cầu của trình duyệt khi trang web và API có cùng tên miền (trình duyệt cũng đặt mục tiêu đề Referer=http://my-site.local:8088, tuy nhiên tôi không thấy điều đó trong Postman). Khi Origintiêu đề không được đặt, thông thường các máy chủ cho phép các yêu cầu như vậy theo mặc định.

Đây là cách tiêu chuẩn để Postman gửi yêu cầu. Nhưng một trình duyệt gửi các yêu cầu khác nhau khi trang web và API của bạn có các tên miền khác nhau và sau đó CORS xảy ra và trình duyệt tự động:

• đặt tiêu đề Host=example.com(của bạn là API)
• đặt tiêu đề Origin=http://my-site.local:8088(trang web của bạn)

(Tiêu đề Referercó cùng giá trị như Origin). Và bây giờ trong tab Bảng điều khiển & Mạng của Chrome, bạn sẽ thấy:

Khi bạn có Host != OriginCORS và khi máy chủ phát hiện yêu cầu như vậy, nó thường chặn nó theo mặc định .

Origin=nullđược đặt khi bạn mở nội dung HTML từ thư mục cục bộ và nó sẽ gửi yêu cầu. Tình huống tương tự là khi bạn gửi yêu cầu bên trong <iframe>, như trong đoạn trích dưới đây (nhưng ở đây Hosttiêu đề hoàn toàn không được đặt) - nói chung, ở mọi nơi, đặc tả HTML đều nói nguồn gốc mờ, bạn có thể dịch nó sang Origin=null. Thông tin thêm về điều này bạn có thể tìm thấy ở đây .

fetch('http://example.com/api', {method: 'POST'});

Look on chrome-console > network tab

Nếu bạn không sử dụng một yêu cầu CORS đơn giản, thông thường trình duyệt cũng tự động gửi yêu cầu TÙY CHỌN trước khi gửi yêu cầu chính - có thêm thông tin ở đây . Đoạn mã dưới đây cho thấy nó:

fetch('http://example.com/api', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json'}
});

Look in chrome-console -> network tab to 'api' request.
This is the OPTIONS request (the server does not allow sending a POST request)

Bạn có thể thay đổi cấu hình máy chủ của mình để cho phép các yêu cầu CORS.

Dưới đây là một cấu hình ví dụ bật CORS trên nginx (tệp nginx.conf) - hãy cẩn thận với cài đặt always/"$http_origin"cho nginx và "*"cho Apache - điều này sẽ bỏ chặn CORS khỏi bất kỳ miền nào.

location ~ ^/index\.php(/|$) {
   ...
    add_header 'Access-Control-Allow-Origin' "$http_origin" always;
    add_header 'Access-Control-Allow-Credentials' 'true' always;
    if ($request_method = OPTIONS) {
        add_header 'Access-Control-Allow-Origin' "$http_origin"; # DO NOT remove THIS LINES (doubled with outside 'if' above)
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Max-Age' 1728000; # cache preflight value for 20 days
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'My-First-Header,My-Second-Header,Authorization,Content-Type,Accept,Origin';
        add_header 'Content-Length' 0;
        add_header 'Content-Type' 'text/plain charset=UTF-8';
        return 204;
    }
}

Đây là một cấu hình ví dụ bật CORS trên Apache (tệp .htaccess)

# ------------------------------------------------------------------------------
# | Cross-domain Ajax requests                                                 |
# ------------------------------------------------------------------------------

# Enable cross-origin Ajax requests.
# http://code.google.com/p/html5security/wiki/CrossOriginRequestSecurity
# http://enable-cors.org/

# <IfModule mod_headers.c>
#    Header set Access-Control-Allow-Origin "*"
# </IfModule>

# Header set Header set Access-Control-Allow-Origin "*"
# Header always set Access-Control-Allow-Credentials "true"

Access-Control-Allow-Origin "http://your-page.com:80"
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
Header always set Access-Control-Allow-Headers "My-First-Header,My-Second-Header,Authorization, content-type, csrf-token"

Gặp lỗi tương tự trong trường hợp sử dụng khác nhau.

Ca sử dụng: Trong chrome khi cố gắng gọi điểm cuối Spring REST theo góc.

Giải pháp: Thêm chú thích @CrossOrigin ("*") trên đầu Lớp điều khiển tương ứng.

Nếu bạn sử dụng .NET làm tầng giữa, hãy kiểm tra rõ ràng thuộc tính tuyến đường, ví dụ:

Tôi đã có vấn đề khi nó như thế này,

[Route("something/{somethingLong: long}")] //Space.

Đã sửa nó bằng cách này,

[Route("something/{somethingLong:long}")] //No space

Chỉ dành cho dự án API .NET Web, thêm các thay đổi sau:

1. Thêm mã sau services.AddMvc()dòng sau trong ConfigureServices()phương thức của tệp Startup.cs:

services.AddCors(allowsites=>{allowsites.AddPolicy("AllowOrigin", options => options.AllowAnyOrigin());
            });

2. Thêm mã sau app.UseMvc()dòng sau trong Configure()phương thức của tệp Startup.cs:

app.UseCors(options => options.AllowAnyOrigin());

3. Mở bộ điều khiển mà bạn muốn truy cập bên ngoài miền và thêm thuộc tính sau ở cấp điều khiển:

[EnableCors("AllowOrigin")]