タイトルの環境で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
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。