Đáp ứng yêu cầu preflight không vượt qua kiểm tra kiểm soát truy cập

Tôi đang gặp lỗi này khi sử dụng ngResource để gọi API REST trên Dịch vụ web của Amazon:

XMLHttpRequest không thể tải http://server.apiurl.com:8000/s/login?login=facebook . Trả lời yêu cầu preflight không vượt qua kiểm tra kiểm soát truy cậ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 ' http: // localhost ' không được phép truy cập. Lỗi 405

Dịch vụ:

socialMarkt.factory('loginService', ['$resource', function($resource){    
    var apiAddress = "http://server.apiurl.com:8000/s/login/";
    return $resource(apiAddress, { login:"facebook", access_token: "@access_token" ,facebook_id: "@facebook_id" }, {
                getUser: {method:'POST'}
            });
}]);

Điều khiển:

[...]
loginService.getUser(JSON.stringify(fbObj)),
                function(data){
                    console.log(data);
                },
                function(result) {
                    console.error('Error', result.status);
                }
[...]

Tôi đang sử dụng Chrome và tôi không biết phải làm gì khác để khắc phục sự cố này. Tôi thậm chí đã cấu hình máy chủ để chấp nhận các tiêu đề từ nguồn gốc localhost.

Bạn đang chạy vào các vấn đề CORS.

Có một số cách để khắc phục / giải pháp này.

1. Tắt CORS. Ví dụ: cách tắt cors trong chrome
2. Sử dụng plugin cho trình duyệt của bạn
3. Sử dụng proxy như nginx. ví dụ về cách thiết lập
4. Đi qua các thiết lập cần thiết cho máy chủ của bạn. Đây là một yếu tố của máy chủ web bạn đã tải trên phiên bản EC2 của bạn (giả sử đây là ý nghĩa của "dịch vụ web Amazon"). Đối với máy chủ cụ thể của bạn, bạn có thể tham khảo trang web CORS cho phép.

Cụ thể hơn, bạn đang cố gắng truy cập api.serverurl.com từ localhost. Đây là định nghĩa chính xác của yêu cầu tên miền chéo.

Bằng cách tắt nó đi để hoàn thành công việc của bạn (OK, bảo mật kém cho bạn nếu bạn truy cập các trang web khác và chỉ cần khởi động) bạn có thể sử dụng proxy khiến trình duyệt của bạn nghĩ rằng tất cả các yêu cầu đến từ máy chủ cục bộ khi thực sự bạn có máy chủ cục bộ mà sau đó gọi máy chủ từ xa.

vì vậy api.serverurl.com có ​​thể trở thành localhost: 8000 / api và nginx cục bộ hoặc proxy khác của bạn sẽ gửi đến đích chính xác.

Bây giờ theo nhu cầu phổ biến, thêm 100% thông tin CORS .... cùng một hương vị tuyệt vời!

Và đối với các downvoters .... bỏ qua CORS là chính xác những gì được hiển thị cho những người chỉ đơn giản là học tập mặt trước. https://codecraft.tv/cifts/angular/http/http-with-promises/

"Máy chủ API" của tôi là một Ứng dụng PHP vì vậy để giải quyết vấn đề này, tôi đã tìm giải pháp bên dưới để hoạt động:

Đặt các dòng trong index.php

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');

Trong api web AspNetCore, vấn đề này đã được khắc phục bằng cách thêm "Microsoft.AspNetCore.Cors" (phiên bản 1.1.1) và thêm các thay đổi bên dưới trên Startup.cs.

public void ConfigureServices(IServiceCollection services)
{ 
    services.AddCors(options =>
    {
          options.AddPolicy("AllowAllHeaders",
                builder =>
            {
                    builder.AllowAnyOrigin()
                           .AllowAnyHeader()
                           .AllowAnyMethod();
                });
    });
    .
    .
    .
}

và

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{


    // Shows UseCors with named policy.
    app.UseCors("AllowAllHeaders");
    .
    .
    .
}

và đưa [EnableCors("AllowAllHeaders")]vào bộ điều khiển.

Có một số hãy cẩn thận khi nói đến CORS. Đầu tiên, nó không cho phép ký tự đại diện *nhưng đừng giữ tôi trên cái này Tôi đã đọc nó ở đâu đó và tôi không thể tìm thấy bài báo bây giờ.

Nếu bạn đang thực hiện các yêu cầu từ một tên miền khác, bạn cần thêm các tiêu đề gốc cho phép.

 Access-Control-Allow-Origin: www.other.com 

Nếu bạn đang làm cho các yêu cầu có ảnh hưởng đến tài nguyên máy chủ như POST / PUT / PATCH, và nếu loại mime khác với những điều sau đây application/x-www-form-urlencoded, multipart/form-datahoặc text/plaintrình duyệt sẽ tự động tạo ra một OPTIONS trước chuyến bay yêu cầu kiểm tra với máy chủ nếu nó sẽ cho phép nó .

Vì vậy, API / máy chủ của bạn cần xử lý các yêu cầu TÙY CHỌN này cho phù hợp, bạn cần phản hồi với access control headersmã trạng thái phản hồi http phù hợp và cần phải có 200.

Các tiêu đề nên là một cái gì đó như thế này, điều chỉnh chúng cho nhu cầu của bạn:

   Access-Control-Allow-Methods: GET, POST, PUT, PATCH, POST, DELETE, OPTIONS
   Access-Control-Allow-Headers: Content-Type
   Access-Control-Max-Age: 86400

Tiêu đề tuổi tối đa rất quan trọng, trong trường hợp của tôi, nó sẽ không hoạt động nếu không có nó, tôi đoán trình duyệt cần thông tin trong bao lâu "quyền truy cập" là hợp lệ.

Ngoài ra, nếu bạn đang thực hiện, ví dụ như một POSTyêu cầu với application/jsonmime từ một tên miền khác, bạn cũng cần thêm tiêu đề cho phép gốc được đề cập trước đó, vì vậy nó sẽ trông như thế này:

   Access-Control-Allow-Origin: www.other.com 
   Access-Control-Allow-Methods: GET, POST, PUT, PATCH, POST, DELETE, OPTIONS
   Access-Control-Allow-Headers: Content-Type
   Access-Control-Max-Age: 86400

Khi chuyến bay trước thành công và nhận được tất cả thông tin cần thiết, yêu cầu thực tế của bạn sẽ được thực hiện.

Nói chung, bất kỳ Access-Controltiêu đề nào được yêu cầu trong yêu cầu ban đầu hoặc trước chuyến bay, nên được đưa ra trong phản hồi để nó hoạt động.

Có một ví dụ điển hình trong các tài liệu MDN ở đây trên liên kết này và bạn cũng nên xem bài đăng SO này

JavaScript XMLHttpRequest và Fetch tuân theo chính sách cùng nguồn gốc. Vì vậy, một ứng dụng web sử dụng XMLHttpRequest hoặc Fetch chỉ có thể thực hiện các yêu cầu HTTP đến miền của chính nó.

Nguồn: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

Bạn phải gửi tiêu đề Access-Control-Allow-Origin: * HTTP từ phía máy chủ của bạn.

Nếu bạn đang sử dụng Apache làm máy chủ HTTP thì bạn có thể thêm nó vào tệp cấu hình Apache của mình như sau:

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

Mod_headers được bật theo mặc định trong Apache, tuy nhiên, bạn có thể muốn đảm bảo nó được bật bằng cách chạy:

 a2enmod headers

Nếu bạn đang viết tiện ích mở rộng chrome

Bạn phải thêm manifest.jsoncác quyền cho (các) tên miền của bạn.

"permissions": [
   "http://example.com/*",
   "https://example.com/*"
]

Nếu bạn đang sử dụng máy chủ IIS một cách tình cờ. bạn có thể đặt các tiêu đề bên dưới trong tùy chọn tiêu đề yêu cầu HTTP.

Access-Control-Allow-Origin:*
Access-Control-Allow-Methods: 'HEAD, GET, POST, PUT, PATCH, DELETE'
Access-Control-Allow-Headers: 'Origin, Content-Type, X-Auth-Token';

với tất cả bài này, nhận được vv, sẽ hoạt động tốt.

Đối với máy chủ bình python, bạn có thể sử dụng plugin jar-cors để kích hoạt các yêu cầu tên miền chéo.

Xem: https://flask-cors.readthedocs.io/en/latest/

Trong PHP bạn có thể thêm các tiêu đề:

<?php
header ("Access-Control-Allow-Origin: *");
header ("Access-Control-Expose-Headers: Content-Length, X-JSON");
header ("Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS");
header ("Access-Control-Allow-Headers: *");
...

Để khắc phục các sự cố yêu cầu nguồn gốc chéo trong ứng dụng Node JS:

npm i cors

Và chỉ cần thêm các dòng dưới đây vào app.js

let cors = require('cors')
app.use(cors())

Trong tệp cấu hình Apache Virtualhost của tôi, tôi đã thêm các dòng sau:

Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
Header always set Access-Control-Max-Age "1000"
Header always set Access-Control-Allow-Headers "x-requested-with, Content-Type, origin, authorization, accept, client-security-token"

RewriteEngine On
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ $1 [R=200,L]

Đối với những người đang sử dụng Proxy tích hợp Lambda với API Gateway . Bạn cần cấu hình chức năng lambda của mình như thể bạn đang gửi yêu cầu của mình trực tiếp đến nó, nghĩa là chức năng sẽ thiết lập tiêu đề phản hồi đúng cách. (Nếu bạn đang sử dụng các chức năng lambda tùy chỉnh, điều này sẽ được xử lý bởi API Gateway.)

//In your lambda's index.handler():
exports.handler = (event, context, callback) => {
     //on success:
     callback(null, {
           statusCode: 200,
           headers: {
                "Access-Control-Allow-Origin" : "*"
           }
     }
}

Tôi nghĩ rằng việc vô hiệu hóa CORS khỏi Chrome không phải là cách tốt , bởi vì nếu bạn đang sử dụng nó trong ion, chắc chắn trong Mobile Build, Vấn đề sẽ lại xảy ra.

Vì vậy, tốt hơn để sửa chữa trong phần cuối của bạn.

Trước hết Trong tiêu đề, bạn cần đặt-

• tiêu đề ('Kiểm soát truy cập-Cho phép-Xuất xứ: *');
• tiêu đề ('Header set Access-Control-allow-Headers: "Origin, X-Requested-With, Content-Type, Accept"');

Và nếu API hoạt động như GET và POST cả thì cũng Đặt trong tiêu đề của bạn-

if ($ _SERVER ['REQUEST_METHOD'] == 'TÙY CHỌN') {if (isset ($ _ SERVER ['HTTP_ACCESS_CONTROL_REQUEST_METHOD'])) tiêu đề ("Điều khiển truy cập-cho phép-phương thức: GET, POST,"
tiêu đề if (isset ($ _ SERVER ['HTTP_ACCESS_CONTROL_REQUEST_HEADERS'])) ("Access-Control-Allow-Headers:
{$ _SERVER ['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}"); thoát (0); }

Một nguyên nhân rất phổ biến của lỗi này có thể là API máy chủ đã ánh xạ yêu cầu tới phương thức http (ví dụ PUT) và trình khách API đang gọi API bằng phương thức http khác (ví dụ POST hoặc GET)

Nhóm của chúng tôi thỉnh thoảng thấy điều này bằng cách sử dụng Vue, axios và C # WebApi. Thêm một thuộc tính tuyến đường trên điểm cuối bạn đang cố gắng sửa nó cho chúng tôi.

[Route("ControllerName/Endpoint")]
[HttpOptions, HttpPost]
public IHttpActionResult Endpoint() { }

Tôi đã phải đối mặt với vấn đề này khi máy chủ DNS được đặt thành 8.8.8.8 (của Google). Trên thực tế, vấn đề là ở bộ định tuyến, ứng dụng của tôi đã cố gắng kết nối với máy chủ thông qua google chứ không phải cục bộ (đối với trường hợp cụ thể của tôi). Tôi đã gỡ bỏ 8.8.8.8 và điều này đã giải quyết được vấn đề. Tôi biết rằng vấn đề này được giải quyết bằng cài đặt CORS, nhưng có thể ai đó sẽ gặp rắc rối tương tự như tôi

Tôi đang sử dụng AWS sdk để tải lên, sau khi dành thời gian tìm kiếm trực tuyến, tôi tình cờ thấy chủ đề này. nhờ @lsimoneau 45581857 , hóa ra điều tương tự cũng xảy ra. Tôi chỉ cần trỏ Url yêu cầu của mình vào vùng trên thùng của mình bằng cách đính kèm tùy chọn vùng và nó đã hoạt động.

 const s3 = new AWS.S3({
 accessKeyId: config.awsAccessKeyID,
 secretAccessKey: config.awsSecretAccessKey,
 region: 'eu-west-2'  // add region here });

Các bản phân phối độc lập của GeoServer bao gồm máy chủ ứng dụng Jetty. Cho phép chia sẻ tài nguyên nguồn gốc chéo (CORS) để cho phép các ứng dụng JavaScript bên ngoài miền của bạn sử dụng GeoServer.

Bỏ ghi chú sau <filter>và <filter-mapping>từ webapps / geoserver / WEB-INF / web.xml:

<web-app>
  <filter>
      <filter-name>cross-origin</filter-name>
      <filter-class>org.eclipse.jetty.servlets.CrossOriginFilter</filter-class>
  </filter>
  <filter-mapping>
      <filter-name>cross-origin</filter-name>
      <url-pattern>/*</url-pattern>
  </filter-mapping>
</web-app>

Thật dễ dàng để giải quyết vấn đề này chỉ với vài bước dễ dàng, không phải lo lắng về bất cứ điều gì. Vui lòng làm theo các bước để giải quyết nó.

1. mở ( https://www.npmjs.com/package/cors#enables-cors-pre-flight )
2. đi đến cài đặt và sao chép lệnh npm install cors để cài đặt qua terminal terminal
3. đi tới Cách sử dụng đơn giản (Kích hoạt tất cả các yêu cầu của CORS) bằng cách cuộn. Sao chép và dán phần khai báo hoàn chỉnh trong dự án của bạn và chạy nó ... điều đó sẽ hoạt động chắc chắn .. sao chép mã nhận xét và dán vào ur app.js hoặc bất kỳ ứng dụng nào khác dự án và thử .. nó sẽ hoạt động. Nó sẽ mở khóa mọi chia sẻ tài nguyên nguồn gốc chéo..chúng tôi có thể chuyển đổi giữa các phục vụ cho việc sử dụng của bạn

Một cái gì đó rất dễ bỏ lỡ ...

IN thám hiểm giải pháp, nhấp chuột phải vào dự án api. Trong cửa sổ thuộc tính, đặt 'Xác thực ẩn danh' thành Đã bật !!!

Vô hiệu hóa bảo mật chrome. Tạo một phím tắt chrome nhấp chuột phải -> thuộc tính -> nhắm mục tiêu, dán "C: \ Program Files (x86) \ Google \ Chrome \ Application \ chrome.exe" --disable-web-security --user -data-dir = "c: / chromedev"