CORS 发布 Ionic 4、WordPress 5.2 和 JWT 身份验证答案

【问题标题】：CORS Issue Ionic 4, WordPress 5.2 and JWT AuthenticationCORS 发布 Ionic 4、WordPress 5.2 和 JWT 身份验证
【发布时间】：2019-12-28 08:57:04
【问题描述】：

我正在使用 Angular 6 和 Ionic 4 以及 Wordpress 5.2 和 JWT 身份验证来访问 wp-json 中的 API。我确定根据 JWT Authentication 以及 Theme 函数中的自定义 CORS 标头启用 CORS，但我仍然收到错误

访问 XMLHttpRequest 在 'https://oc.xxxx.com/wp-json/erp/v1/crm/contacts' 来自来源“http://localhost:8100”已被 CORS 策略阻止：请求头字段 access-control-allow-origin 不允许预检响应中的 Access-Control-Allow-Headers。

我的主题函数中自定义的CORS头如下，

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内容的代码如下，

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 阻塞？提前致谢。

【问题讨论】：

你找到答案了吗，我遇到了完全相同的问题，提前谢谢
@TahaAmineZeghbib 是的。在 sn-p 中添加了答案。检查一下。

标签： angular ionic-framework jwt ionic4 wordpress-rest-api

【解决方案1】：

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

使用任一函数进行检查

【讨论】：

我们在尝试从 ionic ios 物理设备访问 REST API 时遇到了一般的 CORS 问题（不是专门针对 JWT）。我要做的就是注入“Access-Control-Allow-Origin: *”标头。我使用了上面 sn-p 中的第一个函数并删除了所有其他标题更改，它解决了我的问题！
从昨天开始，我在构建我的应用程序时遇到了这个问题，本地主机和以前的版本都很好。建议的解决方案都不起作用。

【解决方案2】：

要使身份验证服务正常工作，您需要安装wp-api-jwt-auth 插件，它允许您生成身份验证令牌。

仔细遵循plugin information page 上提供的所有安装和设置说明。

一般情况下，您需要执行以下操作：

1 - 安装 JWT Authentication for WP REST API 插件。

2 - 编辑 .htaccess 文件以启用 HTTP 授权标头。（大多数共享主机默认禁用此功能。）

编辑 JWT 插件的 .htaccess 文件后，我的现在看起来像这样：

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress
RewriteEngine on
RewriteCond %{HTTP:Authorization} ^(.*)
RewriteRule ^(.*) - [E=HTTP_AUTHORIZATION:%1]
SetEnvIf Authorization "(.*)" HTTP_AUTHORIZATION=$1

3 - 添加密钥并启用 CORS 支持，将两个常量（JWT_AUTH_SECRET_KEY、JWT_AUTH_CORS_ENABLE）添加到 wp-config.php 文件。

/**
 * WordPress JWT Authentication for WP REST API
 *
 * You can generate secret keys using the WordPress.org secret-key service at:
 * https://api.wordpress.org/secret-key/1.1/salt/
 */
define('JWT_AUTH_SECRET_KEY', 'your-top-secret-key');
define('JWT_AUTH_CORS_ENABLE', true);

4 - 最后，在 wp-admin 中激活插件。

【讨论】：