質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

SPA(Single-page Application)

SPA(Single-page Application)は、単一のWebページのみでコンテンツの切り替えができるWebアプリケーションもしくはWebサイトです。ブラウザでのページ遷移がないため、デスクトップアプリケーションのようなUXを提供します。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

Q&A

解決済

1回答

1688閲覧

Laravel Jetstream Inertia環境でwordpressのRestApiを取得したい

pro_hro

総合スコア1

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

SPA(Single-page Application)

SPA(Single-page Application)は、単一のWebページのみでコンテンツの切り替えができるWebアプリケーションもしくはWebサイトです。ブラウザでのページ遷移がないため、デスクトップアプリケーションのようなUXを提供します。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

0グッド

0クリップ

投稿2021/05/20 14:40

タイトルの環境でvueのaxiosを使ってwordpressのRestApiを使いたいのですが、画面遷移後にmountedに設定してあるajaxでエラーが発生します。
ですが、url直打ちでエラーが発生するurlにアクセスするとエラーは発生しません。
取得したいデータはカスタム投稿タイプの指定をしています。

ご回答いただけると幸いです。

functions

1 2<?php 3 function custom_post_type_column_init () { 4 register_post_type( 'column', [ 5 'public' => true, 6 'has_archive' => false, 7 'publicly_queryable' => false, // プレビュー機能 8 'menu_position' => 5, // 管理画面メニュー順序 9 'labels' => [ 10 'name' => 'コラム' // 管理画面表示名 11 ], 12 'show_in_rest' => true, 13 'rest_base' => 'column', 14 'supports' => [ 15 'title', 16 'editor', 17 'author', 18 'thumbnail' 19 ] 20 ]); 21 22 // カスタムタクソノミー 23 register_taxonomy( 24 'column_taxonomy', 25 'column', [ 26 'hierarchical' => true, // カテゴリー: true, タグ: false 27 'public' => true, 28 'show_ui' => true, 29 'label' => 'コラムのカテゴリー', 30 'show_in_rest' => true 31 ]); 32 33 register_taxonomy( 34 'column_tag', //タグ名(任意) 35 'column', //カスタム投稿名 36 array( 37 'hierarchical' => false, //タグタイプの指定(階層をもたない) 38 'label' => 'コラムのタグ', 39 'public' => true, 40 'show_ui' => true, 41 'show_in_rest' => true 42 ) 43 ); 44 45 register_taxonomy_for_object_type('post_tag', 'column'); 46 } 47 add_action('init', 'custom_post_type_column_init'); 48 49 50 add_theme_support('post-thumbnails', ['column']); 51 52 add_filter( 'rest_post_query', 'my_rest_post_query', 10, 2 ); 53 54 function my_rest_post_query( $args, $request ) { 55 if ( isset( $request['title'] ) ) { 56 $args['title'] = array( 57 'value' => esc_attr( $request['title'] ), 58 'compare' => 'LIKE' 59 ); 60 } 61 return $args; 62 } 63 64 65 add_action('rest_api_init', 'customize_api_response'); 66 function customize_api_response() { 67 68 remove_filter( 'rest_pre_serve_request', 'rest_send_cors_headers' ); 69 add_filter( 'rest_pre_serve_request', function( $value ) { 70 header( 'Access-Control-Allow-Origin: *' ); 71 header( 'Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE' ); 72 header( 'Access-Control-Allow-Credentials: false' ); 73 header( 'Access-Control-Allow-Headers: Content-Type, x-xsrf-token,x-requested-with' ); 74 return $value; 75 }); 76 77 $post_types = ['column']; 78 79 foreach ($post_types as $post_type) { 80 register_rest_field( 81 $post_type, 82 'thumbnail', 83 array( 84 'get_callback' => function ($post) { 85 $thumbnail_id = get_post_thumbnail_id($post['id']); 86 87 if ($thumbnail_id) { 88 // アイキャッチが設定されていたらurl・width・heightを配列で返す 89 $img = wp_get_attachment_image_src($thumbnail_id, 'large'); 90 91 return [ 92 'url' => $img[0], 93 'width' => $img[1], 94 'height' => $img[2] 95 ]; 96 } else { 97 // アイキャッチが設定されていなかったら空の配列を返す 98 return []; 99 } 100 }, 101 'update_callback' => null, 102 'schema' => null, 103 ) 104 ); 105 } 106 } 107 108 109 110 function re_register_post_tag_taxonomy() { 111 $tag_slug_args = get_taxonomy('post_tag'); 112 $tag_slug_args->hierarchical = true; 113 $tag_slug_args->meta_box_cb = 'post_categories_meta_box'; 114 register_taxonomy('post_tag', 'post', (array) $tag_slug_args); 115 } 116 add_action( 'init', 're_register_post_tag_taxonomy', 1 ); 117

vue

1 mounted(){ 2 console.log("mounted"); 3 this.getColumns(); 4 this.getCategory(); 5 this.getTag(); 6 }, 7 methods :{ 8 async getColumns(){ 9 let res = await axios.get("https://art.wp.hiraku.tokyo/index.php/wp-json/wp/v2/column", { 10 params: { 11 // ここにクエリパラメータを指定する 12 page: this.currentPage 13 } 14 }); 15 16 this.column = res.data; 17 this.maxPage = res.headers['x-wp-totalpages']; 18 }, 19 async getCategory(){ 20 let res = await axios.get("https://art.wp.hiraku.tokyo/index.php/wp-json/wp/v2/categories"); 21 22 this.categories = res.data; 23 }, 24 async getTag(){ 25 let res = await axios.get("https://art.wp.hiraku.tokyo/index.php/wp-json/wp/v2/tags"); 26 27 this.tags = res.data; 28 },

error

1Access to XMLHttpRequest at 'https://XXX.AAA/index.php/wp-json/wp/v2/categories' from origin 'https://ZZZ.AAA' has been blocked by CORS policy: Request header field x-socket-id is not allowed by Access-Control-Allow-Headers in preflight response. 2app

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

投稿2021/05/20 19:35

pro_hro

総合スコア1

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問