Cách thêm yêu cầu CORS trong tiêu đề trong Angular 5

Question 1

Tôi đã thêm CORS trong tiêu đề nhưng tôi vẫn nhận được vấn đề CORS trong yêu cầu của mình. Cách chính xác để thêm và xử lý CORS và các yêu cầu khác trong tiêu đề là gì?

Đây là mã tệp dịch vụ:

import { HttpClient, HttpHeaders, HttpClientModule } from '@angular/common/http';
const httpOptions = {
  headers: new HttpHeaders({ 
    'Access-Control-Allow-Origin':'*',
    'Authorization':'authkey',
    'userid':'1'
  })
};

public baseurl = 'http://localhost/XXXXXX';

userAPI(data): Observable<any> {
  return this.http.post(this.baseurl, data, httpOptions)
    .pipe(
      tap((result) => console.log('result-->',result)),
      catchError(this.handleError('error', []))
    );
}

Lỗi:

Phản hồi cho 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 đề 'Access-Control-Allow-Origin' có trên tài nguyên được yêu cầu. Nguồn gốc ' http: // localhost: 4200 ' do đó không được phép truy cập

không thành công: Phản hồi thất bại Http cho (url không xác định): 0 Lỗi không xác định

Trong mã phía máy chủ của tôi, tôi đã thêm CORS trong tệp chỉ mục.

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');

Question 2

Theo kinh nghiệm của tôi, các plugin hoạt động với HTTP nhưng không hoạt động với httpClient mới nhất. Ngoài ra, định cấu hình tiêu đề phản hồi CORS trên máy chủ không thực sự là một tùy chọn. Vì vậy, tôi đã tạo một proxy.conf.jsontệp để hoạt động như một máy chủ proxy.

Đọc thêm về điều này ở đây .

proxy.conf.json tập tin:

{
  "/posts": {
    "target": "https://example.com",
    "secure": true,
    "pathRewrite": {
    "^/posts": ""
  },
    "changeOrigin": true
  }
}

Tôi đặt proxy.conf.jsontệp ngay bên cạnh package.jsontệp trong cùng thư mục.

Sau đó, tôi đã sửa đổi lệnh bắt đầu trong tệp package.json:

"start": "ng serve --proxy-config proxy.conf.json"

Cuộc gọi HTTP từ thành phần ứng dụng của tôi:

return this._http.get('/posts/pictures?method=GetPictures')
.subscribe((returnedStuff) => {
  console.log(returnedStuff);
});

Cuối cùng để chạy ứng dụng của tôi, tôi phải sử dụng npm starthoặcng serve --proxy-config proxy.conf.json

Question 3

Bạn cũng có thể thử fetchchức năng và no-corschế độ. Đôi khi tôi thấy việc cấu hình nó dễ dàng hơn so với mô-đun http tích hợp sẵn của Angular. Bạn có thể nhấp chuột phải vào các yêu cầu trong tab mạng công cụ Chrome Dev và sao chép chúng theo cú pháp tìm nạp, điều này thật tuyệt.

import { from } from 'rxjs';

// ...

result = from( // wrap the fetch in a from if you need an rxjs Observable
  fetch(
    this.baseurl,
    {
      body: JSON.stringify(data)
      headers: {
        'Content-Type': 'application/json',
      },
      method: 'POST',
      mode: 'no-cors'
    }
  )
);

Question 4

Nếu bạn giống như tôi và bạn đang sử dụng máy chủ SMS Gateway cục bộ và bạn thực hiện yêu cầu GET tới một IP như 192.168.0.xx, chắc chắn bạn sẽ nhận được lỗi CORS.

Rất tiếc, tôi không thể tìm thấy giải pháp Angular, nhưng với sự trợ giúp của bản phát lại trước đó, tôi đã có giải pháp của mình và tôi đang đăng phiên bản cập nhật cho Angular 7 8 9

import {from} from 'rxjs';

getData(): Observable<any> {
    return from(
      fetch(
        'http://xxxxx', // the url you are trying to access
        {
          headers: {
            'Content-Type': 'application/json',
          },
          method: 'GET', // GET, POST, PUT, DELETE
          mode: 'no-cors' // the most important option
        }
      ));
  }

Chỉ cần đăng ký như bình thường.

Question 5

Tạo tiêu đề giống như thế này cho HttpClient trong NG5:

let httpOptions = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json',
        'apikey': this.apikey,
        'appkey': this.appkey,
      }),
      params: new HttpParams().set('program_id', this.program_id)
    };

Bạn sẽ có thể thực hiện cuộc gọi api với url localhost của mình, nó hoạt động với tôi ..

Xin đừng bao giờ quên cột params của bạn trong tiêu đề: chẳng hạn như params: new HttpParams (). Set ('program_id', this.program_id)

Question 6

POST với httpClient trong Angular 6 cũng đang thực hiện yêu cầu OPTIONS:

Tiêu đề chung:

URL yêu cầu: https: //hp-probook/perl-bin/muziek.pl/=/postData
Phương thức yêu cầu: OPTIONS
Mã trạng thái: 200 OK
Địa chỉ từ xa: 127.0.0.1: 443
Chính sách liên kết giới thiệu: không giới thiệu khi hạ cấp

Máy chủ Perl REST của tôi thực hiện yêu cầu TÙY CHỌN với mã trả lại 200.

Tiêu đề yêu cầu POST tiếp theo:

Chấp nhận:*/*
Chấp nhận mã hóa: gzip, deflate, br
Chấp nhận-Ngôn ngữ: nl-NL, nl; q = 0,8, en-US; q = 0,6, vi; q = 0,4
Access-Control-Request-Headers: content-type
Access-Control-Request-Method: POST
Kết nối: tiếp tục tồn tại
Máy chủ: hp-probook
Nguồn gốc: http: // localhost: 4200
Người giới thiệu: http: // localhost: 4200 /
Tác nhân người dùng: Mozilla / 5.0 (X11; Linux x86_64) AppleWebKit / 537.36 (KHTML, như Gecko) Chrome / 59.0.3071.109 Safari / 537.36

Chú ý Access-Control-Request-Headers: content-type.

Vì vậy, tập lệnh perl phụ trợ của tôi sử dụng các tiêu đề sau:

 - "Access-Control-Allow-Origin" => '*',
 - "Access-Control-Allow-Method" => 'GET, POST, PATCH, DELETE, PUT, OPTIONS',
 - "Access-Control-Allow-Headers" => 'Origin, Content-Type, X-Auth-Token, content-type',

Với thiết lập này, GET và POST đã làm việc cho tôi!

Question 7

vui lòng nhập các tùy chọn yêu cầu từ cors góc cạnh

    import {RequestOptions, Request, Headers } from '@angular/http';

và thêm các tùy chọn yêu cầu trong mã của bạn như được cung cấp bên dưới

    let requestOptions = new RequestOptions({ headers:null, withCredentials: 
    true });

gửi tùy chọn yêu cầu trong yêu cầu api của bạn

đoạn mã bên dưới-

     let requestOptions = new RequestOptions({ headers:null, 
     withCredentials: true });
     return this.http.get(this.config.baseUrl + 
     this.config.getDropDownListForProject, requestOptions)
     .map(res => 
     {
      if(res != null)
      { 
        return res.json();
        //return true;
      }
    })
  .catch(this.handleError);
   }

và thêm CORS trong mã PHP phụ trợ của bạn, nơi tất cả yêu cầu api sẽ đến trước.

hãy thử điều này và cho tôi biết nếu nó hoạt động hay không. Tôi gặp vấn đề tương tự. Tôi đã thêm CORS từ angle5 mà không hoạt động, sau đó tôi đã thêm CORS vào chương trình phụ trợ và nó đã hoạt động cho tôi

Question 8

Điều sau đã làm việc cho tôi sau nhiều giờ cố gắng

      $http.post("http://localhost:8080/yourresource", parameter, {headers: 
      {'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' } }).

Tuy nhiên mã sau không hoạt động, tôi không rõ là tại sao, hy vọng ai đó có thể cải thiện câu trả lời này.

          $http({   method: 'POST', url: "http://localhost:8080/yourresource", 
                    parameter, 
                    headers: {'Content-Type': 'application/json', 
                              'Access-Control-Allow-Origin': '*',
                              'Access-Control-Allow-Methods': 'POST'} 
                })