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
},
});
...muuskanuikku kirjoitti:
(18.09.2024 10:21:50): Copy-paste on vaikea laji. Koodaus ei saisi...
Miten korjaat tämän kun kyseessä on suljettu sovellus jossa yhdessä asennustiedostossa sisään rekennettuna Tomcat, JVM, jne. Johon sitten tämä minun sovellus asennetaan. Ja koska on suljettukoodi ja Tomcat-asetukset valmiina niin milläs muutat API:a joka myös suljettu?
Tarkoitatko suljetulla API:lla ettet voi itse vaikuttaa sen toimintaan? Jos näin, niin silloin et tietysti voi CORS sääntöjäkään bäkkärille asettaa ainakaan API:n sisälle. Mutta CORS säännöt tosiaan kuuluvat backendiin, jossa palvelu tarkistaa saapuuko kutsu sallitusta osoitteesta, sallitulla metodilla. React itsessään pyörii käyttäjän laitteella, eli kun käyttäjä tulee reactilla tehdylle sivustolle, selain lataa javascriptit palvelimelta ja käyttäjän oma laite rakentaa ja renderöi sivuston. Siksi CORS säännöt eivät voi olla react-puolella, siitä ei ole mitään hyötyä koska ei se react client (toivottavasti) ainakaan minään apina toimi, vaan käyttää bäkkärissäsi olevaa apia.
1. Tee microservice backend, joka lähettää kyselyt kolmannen osapuolen palvelimelle
2. Säädä microservicen politiikat siten, että voit kommunikoida react appiksen kanssa
3. Proxyta react applikaation kyselyt kolmannen osapuolen palikalle tämän luomasi bäkärin kautta
4. ?????
5. Profit
React-käyttölittymä on samalla domainilla kuin tämä Java EE -sovellus ja esim. tiedostojen uppaus omalta kovolta onnaa hyvin kuten myös videoiden/ääneen nauhoitus Web-kameralla/mikrofoonilla mutta kun esim. OpenAI yrittää upata palvelilemme jotain kuten DELL:n AI:n genroimia kuvia niin eipäs onnistu.
React käyttöliittymä ladataan käyttäjän laitteelle, joten käyttöliittymä ei ole palvelimella. Palvelimellasi pyörii reactilla tehdyn ui:n latauspaketti, jonka selain lataa, ja renderöi käyttöliittymäksi käyttäjän laitteella. Siksi siinä et CORS sääntöjä mitenkään edes aseta. Olisi aika tyhmää jos client voisi kertoa mitkä on sallitut domainit, se veisi pohjan koko CORS:lta jos joka kutsussa voisi vaan antaa eri domainit? riippuen sitten mistä kutsutaankin.
Jos haluat jsx pohjaisen ui:n joka oikeasti pyörii palvelimellasi eikä käyttäjän selaimessa, tee se esim nextJS:llä ja sen ssr-ominaisuuksilla.
groovyb kirjoitti:
(03.10.2024 21:55:36): React käyttöliittymä ladataan käyttäjän...
npm run build -komento tekee React-koodista palvelimelle asenettavan version ja se ajetaan selaimessa palvelimelta js domain on molemmille conflunece . i4ware . fi. Eli kun .jar-paketti asennetaan saleimella Atlassian Confluence Data Centeriin niin se asiantaa kaiken eli Java EE -back-endin ja React-front-endin ja kakki peliitää kun tuotteeseen syöttää OpenAI API-keyn ja Pusher API -keyt.
Siis pistetään toi käänneety versio React-koodista samaan .jar-tiedostoon niin toimii.
Eikä ees sitä React-koodia voi ajaa palikallisella koneella niin, että Confluence on VPS:llä. Vaan se pitää kääntää ja laittaa resurssikansioon Java Maven 3 -projektissa. Ja myös jokaisen koodirivimuutoksen jälkeen pitää käynnistää npm run build.
npm run build -komento luo production buildin React-sovelluksestasi. Tämä tarkoittaa, että se generoi yhden HTML-tiedoston sekä minifioidun ja optimoidun version JavaScript-koodistasi. Tämä koodi ei ajaudu palvelimella, vaan palvelin toimii vain jakelupisteenä, joka lähettää nämä tiedostot selaimelle, kun sovellus avataan.
Esimerkki:
1. Kun käyttäjä avaa sovelluksen selaimessa, palvelin lähettää HTML-tiedoston selaimelle.
2. HTML-tiedosto sisältää <script>-tagin, joka lataa minifioidun JavaScript-koodin selaimeen.
3. Tämä JavaScript-koodi ajetaan käyttäjän selaimessa, ei palvelimella.
4. Näin ollen React-sovellusta ei “asenneta” palvelimelle, vaan palvelin vain jakaa valmiit tiedostot (HTML, JS, CSS) selaimelle.
Eli koodi ei toimi niin, että React-koodi ajettaisiin palvelimella tai “asennettaisiin” sinne. Sen sijaan koodi käännetään tuotantovalmiiksi ja jaetaan selaimelle, jossa se ajetaan.
Kun koodissa tehdään muutoksia, käännetty tuotantoversio tulee päivittää palvelimelle ajamalla npm run build, jotta päivitetyt tiedostot voidaan jakaa selaimelle.
BiBiBi kirjoitti:
(04.10.2024 10:51:11): npm run build -komento luo production buildin...
Kiitos tiedosta. Opiskelen nyt Adwanced Web Programming -kurssia LUT Yliopistossa ja tämä ei ole mikään helppo juttu vaikka siellä lähdetään ihan peusteista. Ja samoin Cuberturvallisuutta Tampreen Yliopistossa ja myös Tekoälyä Vaasan Yliopistossa.
Kurseille jos itsekkin haluatte niin täältä pääsee ilman maksua: https://fitech.io/
Niin ja mä en kysy teiltä tietoa jota yritätte selittää vaan sitä miten Atlassian Confluencessa tämä asia ratkaistaan.
1. Atlassian on estänyt titettyjen apien asennuksen appseihin .jar-pakettii ja estänyt itse jar tiedostossa Cros-asetusten säätämisen väkisein jne jne. Minä olen koodaillut Appseja jo 20-vuotta Atlassianille joten minun pitäs olla asiantuntija jo.
walkout_ kirjoitti:
(10.10.2024 07:22:56): Niin ja mä en kysy teiltä tietoa jota yritätte...
Sinulle vastattiin jo tuohon cors kysymykseen: Sinun tulee backendissä hallita CORS säännöt, ei clientissä. Origin tieto välittyy kyllä automaattisesti joka kutsussa (tieto minkä osoitteen alla react-sovelluksesi on hostattuna), ja sinun tulee vaan välittää tieto itse backendiin web-palvelimellasi (joka taisi olla tomcat). CORS säännöistä yleisesti, 'Access-Control-Allow-Origin': '*' säännöllä sallit kutsut mistä tahansa joten yhtä hyvin voisit vaan ottaa koko CORS tarkistuksen pois käytöstä.
1. Laita AI-rajapintaasi CORS säännöt clientin sijaan, tuosta saat lisätietoa internetistä etsimällä koska et kertonut millä teknologialla/tekniikalla olet ylipäätään rajapintasi toteuttanut
2. Ohjaa saapuneiden kutsujen origin tieto, jotta rajapintasi saa tietoon kutsun headereistä mistä palvelusta rajapintaasi on kutsuttu. Ilman tätä uudelleenohjausta cors tarkastus todennäköisesti epäonnistuu. Riippuen toki siitä, missä itse cors tarkistuksen teet.
CORS tarkistus voi siis olla suoraan tomcatissä, tai toteutettuna muulla tavoin rajapintasi koodissa.