fetch API で 「なろう小説API」という API をたたいてるのですが、クロスオリジンエラーになってしまいます

Question

javascript 初心者です。

なろう小説APIという、小説を取得するAPIをたたいてるのですが、クロスオリジンエラーが出て困っています。

以下、エラーが出るコードです。

// API サーバーのレスポンスを、コンソールに表示する関数。
function call(jsonData) {
  console.log(jsonData)
}

// クエリパラメータには、出力形式をjsonpにする「out=jsonp」と、コールバック関数名を call にする「callback=call」を設定しています。
const API_URL = 'https://api.syosetu.com/novelapi/api/?out=jsonp&callback=call'

fetch(API_URL, {
  mode: 'cors',
})

エラー画面↓

ご教授お願いします。

Answer 1

jsonpの処理ですよね？
単にfetchでする処理ではないのでは？

function call(jsonData) {
  console.log(jsonData)
}
const API_URL = 'https://api.syosetu.com/novelapi/api/?out=jsonp&callback=call'
var sc=document.createElement('script');
sc.src=API_URL;
document.querySelector('head').appendChild(sc);

jQuery

function call(jsonData) {
  console.log(jsonData)
}
$(function(){
  const API_URL = 'https://api.syosetu.com/novelapi/api/';
  $.ajax({
  url:API_URL,
  type:"get",
  data:{out:"jsonp",callback:"call"},
  dataType:"jsonp",
  });
});

Comments

[N---------]

回答ありがとうございます。

都合上、処理（apiサーバーにリクエスト送って受け取って表示）をjsファイル内だけで完結させたくて、htmlにsrcタグを追加とかはしたくないのです。

このような場合、どうすればよいのでしょうか...?

[yambejp]

> htmlにsrcタグを追加とかはしたくないのです。

といって、jsonpの考え方がそういうものですからね
まぁ最悪evalで処理すると言う手もあります。
もちろんjQueryを利用可能であれば$.ajaxのdataTypeに
"jsonp"を指定すれば処理できますよ

[N---------]

jqueryのコードまで書いてくださり、感謝です！

Answer 2

JSONP形式は、fetch経由で取得するものではありません。JSONPをハンドリングできるライブラリを使うことをおすすめします。