CORS Issue Ionic 4，WordPress 5.2和JWT身份验证 [英] CORS Issue Ionic 4, WordPress 5.2 and JWT Authentication

问题描述

我正在将Angular 6和Ionic 4与Wordpress 5.2和JWT身份验证一起使用，以访问wp-json中的API.我确定要根据JWT身份验证启用CORS并在Theme函数中启用自定义CORS标头，但是我仍然会收到错误

I am using Angular 6 and Ionic 4 with Wordpress 5.2 and JWT Authentication to access an API in wp-json. I was sure to enable CORS according to JWT Authentication and also custom CORS headers in Theme function but I am still receiving the error

在以下位置访问XMLHttpRequest' https://oc.xxxx.com/wp-json/erp/v1/crm/contacts "CORS政策已阻止来源" http://localhost:8100 ":请求标头字段的access-control-allow-origin不允许飞行前响应中的Access-Control-Allow-Header.

Access to XMLHttpRequest at 'https://oc.xxxx.com/wp-json/erp/v1/crm/contacts' from origin 'http://localhost:8100' has been blocked by CORS policy: Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response.

主题函数中的自定义CORS标头如下所示

The custom CORS header in my theme function is as follows,

function my_customize_rest_cors() {
  remove_filter( 'rest_pre_serve_request', 'rest_send_cors_headers' );
  add_filter( 'rest_pre_serve_request', function( $value ) {
    header( 'Access-Control-Allow-Origin: *' );
    header( 'Access-Control-Allow-Methods: GET' );
    header( 'Access-Control-Allow-Credentials: true' );
    header( 'Access-Control-Expose-Headers: Link', false );
    return $value;
  } );
}
add_action( 'rest_api_init', 'my_customize_rest_cors', 15 );

在我的Ionic应用程序上，调用API内容的代码如下，

and on my Ionic app, the code to call the API content is as follows,

getContact() {
    var service = this;
    let url = service.appConfig.Shop_URL + "/wp-json/erp/v1/crm/contacts";
    url = this.initUrl(url, '');
    var headers = new Headers();
    headers.append('Authorization', 'Bearer ' + service.userService.token);
    headers.append('Access-Control-Allow-Origin', '*');
    return new Promise(function (resolve, reject) {
      service.http.get(url, { headers: headers }).pipe(map(res => res.json())).subscribe(data => {
        if (data) {
          service.cachedData = data;
          resolve(service.cachedData);
        }
        else {
          reject();
        }
      });
    });
  }

我错过了什么导致CORS阻塞?预先感谢.

What did I miss that cause the CORS blocking? Thanks in advance.

推荐答案

function my_customize_rest_cors() {
  remove_filter( 'rest_pre_serve_request', 'rest_send_cors_headers' );
  add_filter( 'rest_pre_serve_request', function( $value ) {
    header( 'Access-Control-Allow-Origin: *' );
    header( 'Access-Control-Allow-Methods: GET,HEAD,OPTIONS,POST,PUT' );
    header( 'Access-Control-Allow-Credentials: true' );
    header( 'Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Authorization' );
    header( 'Access-Control-Expose-Headers: Link', false );
    return $value;
  } );
}
add_action( 'rest_api_init', 'my_customize_rest_cors', 15 );

function add_cors_http_header(){
    header("Access-Control-Allow-Origin: *");
    header( 'Access-Control-Allow-Origin: *' );
    header( 'Access-Control-Allow-Methods: GET,HEAD,OPTIONS,POST,PUT' );
    header( 'Access-Control-Allow-Credentials: true' );
    header( 'Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Authorization' );
    header( 'Access-Control-Expose-Headers: Link', false );
}
add_action('init','add_cors_http_header');

使用其中一项功能进行检查

Use either one of the functions to check

这篇关于CORS Issue Ionic 4，WordPress 5.2和JWT身份验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！