I just started learning electronjs. I have added axios in my preload.js file
const axios = require('axios');
axios.get('https://jsonplaceholder.typicode.com/todos/1')
.then(function (response) {
// handle success
console.log(response);
})
.catch(function (error) {
// handle error
console.log(error);
})
.then(function () {
// always executed
});
I do get a status:200 as a response, but there is no response data. there are also no console messages. Am i missing something? But if I do the request after the content load, it returns an error.
const axios = require('axios');
let getData = () => {
axios.get('https://jsonplaceholder.typicode.com/todos/1')
.then(function (response) {
// handle success
console.log(response);
})
.catch(function (error) {
// handle error
console.log(error);
})
.then(function () {
// always executed
});
}
window.addEventListener('DOMContentLoaded', () => {
getData();
});
the above returns Refused to connect to 'https://jsonplaceholder.typicode.com/todos/1' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.
I had same issue with loading image from external URL to my background.
In my index.ts (entry point of electron app) I subscribe to "ready" event and specify this responseHeaders. * means that we can accept all resources that need to be load for current page. It's not recommended to use * flag, but just for testing I use it. More: MDN
import { session, app } from "electron"
app.on("ready", () => {
session.defaultSession.webRequest.onHeadersReceived((details, callback) => {
callback({
responseHeaders: {
...details.responseHeaders,
"Content-Security-Policy": ["*"],
},
});
});
})