Hei,
Nyt on selainen ongelma, että tässä React-koodissa virhe imoitus CROS: Allow Origin ei toimi.
const generateImage = async (message, apiPageId) => { try { const response = await Axios.post(apiUrl + '/plugins/servlet/ai/generate-response?action=generateImage', { prompt: message, apiPageId }, { headers: { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*', // This header must be handled on the server-side }, }); try { const generatedImageURL = response.data.response; // Assuming the API returns the image URL // Step 2: Download the generated image const imageResponse = await Axios.get(generatedImageURL, { responseType: 'arraybuffer' }); const imageBlob = new Blob([imageResponse.data], { type: 'image/png' }); // Step 3: Upload the image to Confluence as a page attachment const confluenceUrl = `${apiUrl}/rest/api/content/{apiPageId}/child/attachment`; // Replace {pageId} with your actual page ID const formData = new FormData(); const timestamp = new Date().toISOString().replace(/[:.]/g, '-'); // Format timestamp as 'YYYY-MM-DDTHH-MM-SS' const fileName = `${timestamp}_generatedImage.png`; // Create file name with timestamp formData.append('file', imageBlob, fileName); formData.append('minorEdit', 'true'); formData.append('ai_generated_image', 'true'); const uploadResponse = await Axios.post(confluenceUrl, formData, { headers: { 'X-Atlassian-Token': 'no-check', 'Content-Type': 'multipart/form-data', 'Access-Control-Allow-Origin': '*', }, }); } catch (error) { console.error('Error:', error); } const highlightedHTML = response.data.response; const aiResponseMessage = { username: 'AI', generate: true, message: highlightedHTML, created_at: new Date().toISOString(), }; setAiImage('ai_generated_image'); await saveMessageToDatabase(aiResponseMessage, apiPageId); setIsThinking(false); await Axios.post(apiUrl + '/plugins/servlet/ai/thinking', { username: 'AI', isThinking: false }); fetchMessages(); // Fetch messages after generating AI response } catch (error) { console.error('Error:', error); setIsThinking(false); } };
Missä vika?
Tässä AJAX response:
{ "username": "Matti Kiviharju", "message": "ai_generated_image" }
Muutin koodia näin mutta ei silti toimi Cros-domain.
const generateImage = async (message, apiPageId) => { try { const response = await Axios.post(apiUrl + '/plugins/servlet/ai/generate-response?action=generateImage', { crossdomain: true, prompt: message, apiPageId }, { headers: { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*', // This header must be handled on the server-side }, }); try { const generatedImageURL = response.data.response; // Assuming the API returns the image URL // Step 2: Download the generated image const imageResponse = await Axios.get(generatedImageURL, { responseType: 'arraybuffer' }); const imageBlob = new Blob([imageResponse.data], { type: 'image/png' }); // Step 3: Upload the image to Confluence as a page attachment const confluenceUrl = `${apiUrl}/rest/api/content/{apiPageId}/child/attachment`; // Replace {pageId} with your actual page ID const formData = new FormData(); const timestamp = new Date().toISOString().replace(/[:.]/g, '-'); // Format timestamp as 'YYYY-MM-DDTHH-MM-SS' const fileName = `${timestamp}_generatedImage.png`; // Create file name with timestamp formData.append('file', imageBlob, fileName); formData.append('minorEdit', 'true'); formData.append('ai_generated_image', 'true'); const uploadResponse = await Axios.post(confluenceUrl, { crossdomain: true, formData }, { headers: { 'X-Atlassian-Token': 'no-check', 'Content-Type': 'multipart/form-data', 'Access-Control-Allow-Origin': '*', }, }); } catch (error) { console.error('Error:', error); } const highlightedHTML = response.data.message; const aiResponseMessage = { username: 'AI', generate: true, message: highlightedHTML, created_at: new Date().toISOString(), }; setAiImage('ai_generated_image'); await saveMessageToDatabase(aiResponseMessage, apiPageId); setIsThinking(false); await Axios.post(apiUrl + '/plugins/servlet/ai/thinking', { username: 'AI', isThinking: false }); fetchMessages(); // Fetch messages after generating AI response } catch (error) { console.error('Error:', error); setIsThinking(false); } };
Serveripuolen ongelma todennäköisesti. Pyöritätkö molempia instansseja lokaalisti?
noutti kirjoitti:
Serveripuolen ongelma todennäköisesti. Pyöritätkö molempia instansseja lokaalisti?
En pyöritä locaalilla Tomcatillä vaan omalla VPS:llä.
Ja tämä on siis J2EE solvellus joka pyytä ChatGPT OpenAI:ta generoimaan sille annettujen tekstikuvausten mukainen kuvatihdeosto. Eli kaikki muu toimiia poaitsi Firefoxin Developer Toolsin mukaan kuvan se laitaa kyllä mutta tullee se CROS Missing Allow Origin -viheilointus ja kuva kyllä toimii kun sen URL:n syötää manuaalista selaimeen.
PS: PHP/React-sovellusten kansa tätä ongelmaa ei ilmene lainkaan.
PSS: Ojelman tarkoitus on telentaa ChatGPT:n luoma kuvatiedost Tomcat-palvelimelle minun VPS:llä mutta tämä alla olevaan koodin se kaautu koska se ei anna hakea ks. kuvaa Cros-Domainista:
try { const generatedImageURL = response.data.response; // Assuming the API returns the image URL // Step 2: Download the generated image const imageResponse = await Axios.get(generatedImageURL, { responseType: 'arraybuffer' }); const imageBlob = new Blob([imageResponse.data], { type: 'image/png' }); // Step 3: Upload the image to Confluence as a page attachment const confluenceUrl = `${apiUrl}/rest/api/content/{apiPageId}/child/attachment`; // Replace {pageId} with your actual page ID const formData = new FormData(); const timestamp = new Date().toISOString().replace(/[:.]/g, '-'); // Format timestamp as 'YYYY-MM-DDTHH-MM-SS' const fileName = `${timestamp}_generatedImage.png`; // Create file name with timestamp formData.append('file', imageBlob, fileName); formData.append('minorEdit', 'true'); formData.append('ai_generated_image', 'true'); const uploadResponse = await Axios.post(confluenceUrl, { crossdomain: true, formData }, { headers: { 'X-Atlassian-Token': 'no-check', 'Content-Type': 'multipart/form-data', 'Access-Control-Allow-Origin': '*', }, }); } catch (error) { console.error('Error:', error); }
Lisään myös että tämä on siis Atlassian Confluence Data Center -sovellus, jona on mod_proxyllä laitettu Apache 2 HTTP severiille niin ettei se tulisi Tomacatin maista portista 8090 ja SSL VirtualHost-tidostossa on tiukat tietoturva-asetukset kuten alla:
SSLEngine On SSLCertificateKeyFile /etc/letsencrypt/live/i4ware.fi/privkey.pem SSLCertificateFile /etc/letsencrypt/live/i4ware.fi/cert.pem SSLCACertificateFile /etc/letsencrypt/live/i4ware.fi/chain.pem SSLProtocol all -SSLv2 -SSLv3 -TLSv1 -TLSv1.1 SSLHonorCipherOrder on SSLCipherSuite "EECDH+ECDSA+AESGCM EECDH+aRSA+AESGCM EECDH+ECDSA+SHA384 EECDH+ECDSA+SHA256 EECDH+aRSA+SHA384 EECDH+aRSA+SHA256 EECDH+aRSA+RC4 EECDH EDH+aRSA RC4 !aNULL !eNULL !LOW !3DES !MD5 !EXP !PSK !SRP !DSS" <IfModule mod_headers.c> Header always set Strict-Transport-Security "max-age=63072000; includeSubDomains; preload" Header always set X-Xss-Protection "1; mode=block" Header always set X-Content-Type-Options "nosniff" Header set Permissions-Policy: "accelerometer=(), camera=(), geolocation=(), gyroscope=(), magnetometer=(), microphone=(), payment=(), usb=()" Header always set X-Frame-Options "ALLOWALL" Header set Cache-Control: "no-cache, no-store" Header set Access-Control-Allow-Origin "*" </IfModule> ProxyPreserveHost On ProxyPass / http://127.0.0.1:8090/ ProxyPassReverse / http://127.0.0.1:8090/
https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors
Clientti puolen appiksilla, kun lähettää tavaraa ulkopuolelle tulee näitä ongelmia. Proxyta API pyyntö eteenpäin jollain omalla rajapinnallasi, joka pyörii lokaalisti.
noutti kirjoitti:
https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors
Clientti puolen appiksilla, kun lähettää tavaraa ulkopuolelle tulee näitä ongelmia. Proxyta API pyyntö eteenpäin jollain omalla rajapinnallasi, joka pyörii lokaalisti.
Kiitos kattavasta oppasta.
Copy-paste on vaikea laji. Koodaus ei saisi kiinnostaa niin vähän, että sokeasti vain liittää tekstiä netistä omaan sovellukseensa koskaan edes pastea lukematta.
Rivillä, jolla lisäät otsakkeen Access-Control-Allow-Origin, sanotaan selkeästi, että kyseinen otsake tulee "käsitellä" backendissa. Backend kertoo selaimelle, mitkä originit ovat sallittuja. Selain ei voi itse päättää asiasta.
Tämä asia on kyllä selitetty myös ko. otsakkeen dokumentaatiossa esimerkiksi Mozillan sivuilla.
Ongelmana voi myös olla se, ettei virheilmoituksia ole jaksettu lukea. Koska lisäät otsakkeen Access-Control-Allow-Origin myös selaimesta lähtevään pyyntöön, niin on hyvin mahdollista, että selain hylkää pyynnön, koska backend ei salli asiakasohjelman käyttää otsaketta Access-Control-Allow-Origin.
(Sallitut otsakkeet tulee määritellä responsessa, ml. preflight-pyyntö, otsakkeen Access-Control-Allow-Headers arvossa.)
const generateImage = async (message, apiPageId) => { try { const response = await Axios.post(apiUrl + '/plugins/servlet/ai/generate-response?action=generateImage', { prompt: message, apiPageId }, { headers: { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*', // This header must be handled on the server-side }, }); ...