欣迪
WordPress Buttons sent by community team to our WordCamp

經過上一章節的設定後,我們現在就來取得 WP 的資料。

我們在頁面上向其他網域提取資料時,如果沒有在 server 檔案的 header 做設定,要做跨網域存取會被擋掉。

這邊提供幾個方法來解決 WP rest-api 的跨域存取。

方法一 在 functions.php 加入設定

function add_custom_headers() {

    add_filter( 'rest_pre_serve_request', function( $value ) {
        header( 'Access-Control-Allow-Headers: Authorization, X-WP-Nonce,Content-Type, X-Requested-With');
        header( 'Access-Control-Allow-Origin: *' );
        header( 'Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE' );
        header( 'Access-Control-Allow-Credentials: true' );
        return $value;
    } );
}
add_action( 'rest_api_init', 'add_custom_headers', 15 );

如果只想允許部分網域存取請改成:

function add_custom_headers() {

    add_filter( 'rest_pre_serve_request', function( $value ) {
      	$origin = get_http_origin();
      	$allowed_origins = [ 'site1.example.com', 'site2.example.com', 'localhost:3000' ];
        if ( $origin && in_array( $origin, $allowed_origins ) ) {
          header( 'Access-Control-Allow-Origin: ' . esc_url_raw( $origin ) );
        }
        header( 'Access-Control-Allow-Headers: Authorization, X-WP-Nonce,Content-Type, X-Requested-With');
        header( 'Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE' );
        header( 'Access-Control-Allow-Credentials: true' );
        return $value;
    } );
}
add_action( 'rest_api_init', 'add_custom_headers', 15 );

方法二 使用 .htaccess

大部分的 PHP 主機都使用 Apache,所以可以在 wp 目錄下的 .htaccess 簡單的加上檔案的路徑(通常是網址 + /wp-json/wp/v2/

# .htaccess
# 放在 WP 網站所在的資料夾
<If "%{REQUEST_URI} =~ /wp-json/wp/v2/">
  <IfModule mod_headers.c>
     Header set Access-Control-Allow-Origin "*"
  </IfModule>
</If>

如果你是從 server side 發 request 則沒有這類問題。 加好之後,差不多就可以進入實作的部分。

訂閱 IT-Monk

訂閱最新文章的發布消息! 😚😚😚
Loading

作者介紹 - 欣迪

欣迪

從設計到寫程式,發現自己有追求前端技巧的自虐傾向。不斷的踩坑,再從坑裡爬出來,慢慢對攀岩有點心得。 目前在多間公司擔任網站設計顧問。 同時也是網站架設公司負責人。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。