Jisho

The API does not set any Access-Control-Allow-Origin header. That means that if your client is restricting queries because of same-origin policy, well these requests may fail. The only thing you can do is to tell your client to not apply that policy. Depending on what exactly you're implementing this could be a trivial task or it could be impossible.

For example, if you want to create a website with some Javascript code that queries the API dynamically, then the API clients are the browsers of your users and because you cannot control them to not apply SOP, you would be SOL. But if you query the API from your server or from an application that you have written yourself, then it's just a settings change.

There's not "whitelist" at Jisho.org of any form, though. That'd mean they would have to set an Access-Control-Allow-Origin header appropriately at least as of now it doesn't seem like they're doing that.

You must create a server and create a proxy on it to consume the api and direct the response to your frontend.

Jisho does not provide an official way to whitelist servers because its API does not explicitly support CORS. This means you cannot make direct requests from the frontend (React or any other client-side technology).

Solution: Use an Intermediate Server
Since browsers block direct requests to the Jisho API due to CORS restrictions, the most common solution is to make the requests from your backend instead of the frontend. This avoids CORS issues because servers do not have the same restrictions.

• Create a Proxy Server (Example in Express.js with Node.js) - If you're using a backend with Node.js, you can create a simple proxy server:

const express = require('express');
const axios = require('axios');
const cors = require('cors');

const app = express();
const PORT = 3001;

app.use(cors()); // Enable CORS for all requests

app.get('/jisho', async (req, res) => {
try {
const { word } = req.query; // Get the search word from the query
if (!word) {
return res.status(400).json({ error: "You must provide a word." });
}

    // Make a request to the Jisho API
    const response = await axios.get(`https://jisho.org/api/v1/search/words?keyword=${encodeURIComponent(word)}`);
    res.json(response.data);
} catch (error) {
    res.status(500).json({ error: "Error fetching data from Jisho." });
}

});

app.listen(PORT, () => {
console.log(Server running at http://localhost:${PORT});
});

• Fetch Data from the Proxy in Your Frontend - In your React code, make the request to your own backend instead of Jisho directly:

const fetchJishoData = async (word) => {
const response = await fetch(http://localhost:3001/jisho?word=${word});
const data = await response.json();
console.log(data);
};

fetchJishoData("猫"); // Example search for "cat"