I want to create/update a study material from a Tapermonkey script. If I paste the following example
var apiToken = '<api_token_here>';
var apiEndpointPath = 'study_materials';
var requestHeaders =
new Headers({
'Wanikani-Revision': '20170710',
Authorization: 'Bearer ' + apiToken,
});
var apiEndpoint =
new Request('https://api.wanikani.com/v2/' + apiEndpointPath, {
method: 'POST',
headers: requestHeaders,
body: {
"study_material": {
"subject_id": 2,
"meaning_note": "The two grounds is too much",
"reading_note": "This is tsu much",
"meaning_synonyms": [
"double"
]
}
}
});
fetch(apiEndpoint)
.then(response => response.json())
.then(responseBody => console.log(responseBody));
from WaniKani API Reference in the Chrome console after visiting https://www.wanikani.com/ (and substitute in my API key) I get the following error:
Access to fetch at 'https://api.wanikani.com/v2/study_materials' from origin 'https://www.wanikani.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
builder.js:691 POST https://api.wanikani.com/v2/study_materials net::ERR_FAILED
(anonymous) @ builder.js:691
(anonymous) @ VM48:24
(index):1
I get the same error if I run the code in a Tapermonkey script like the following.
// ==UserScript==
// @name WaniKani Create Study Material Test
// @namespace http://tampermonkey.net/
// @version 0.1
// @description try to take over the world!
// @author You
// @match https://www.wanikani.com
// @grant none
// ==/UserScript==
(function() {
'use strict';
// SAME CODE HERE
})();
I do not get a CORS error when using the API to get a study material or subject data from www.wanikani.com. I only have a problem with creating/updating. Is this intentional? Is there a reason this couldn’t be allowed? Why do I not get CORS errors when making other API requests?
I can use GM_xmlhttpRequest
to work around the problem, but I would rather not since it adds friction by asking the user to allow the function.