Getting CORS error

[Subtitle_man]

This is my first project and I am sadly getting a dreaded CORS error. Please can someone check what I am doing wrong?

const options={
method:'GET',
Headers:{"Api-Key":api_key_sub,
"User-Agent":"Subtle/1.0",
"Accept":"application/json"}
};

fetch(url_sub,options)
.then(response =>response.json())
.then(response => console.log(response))
.catch(err => console.log(err));

All this is only being done from frontend. I don't have a backend.

[oss]

You need to send X-User-Agent instead of User-Agent (this you can not change).

Try again

[Subtitle_man]

Still getting the error.

[Subtitle_man]

Here's the errors I am getting in order:

1st error

Access to fetch at 'https://api.opensubtitles.com/api/v1/su ... _id=299534' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: 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.

2nd error

GET https://api.opensubtitles.com/api/v1/su ... _id=299534 net::ERR_FAILED 403 (Forbidden)

3rd error

TypeError: Failed to fetch at HTMLDocument.<anonymous>

[oss]

Hi

it is quite strange, because our API returns headers in 1)

curl -vvv -L --request GET \
--url 'https://api.opensubtitles.com/api/v1/su ... _id=299534' \
--header 'Api-Key: xxx' \
--header 'User-Agent: yourua v1.1'

response

< access-control-allow-origin: *
< access-control-allow-methods: GET, HEAD, POST, OPTIONS
< access-control-allow-headers: Origin, Authorization, Accept, Api-Key, Content-Type, X-User-Agent

I removed some headers, lets see if that improve. Refer to
https://developer.mozilla.org/en-US/doc ... low-Origin

so that error doesnt make sense to me.

If you can send me your html, so I can try here.



2nd and 3rd error is because of 1st error.

[Subtitle_man]

It still isnt working. Here's my script:

Javascript

document.addEventListener("DOMContentLoaded", () => {
console.log("DOM Content loaded.");

if (document.querySelector(".index")) {
let base_urls = "";
let image_size = "";
config();


console.log("1st file");

let search_button = document.querySelector("#indexbutton");//added let
console.log(search_button,typeof(search_button));
search_button.addEventListener("click", searched);

let url = "";
const api_key = "xxxx"; //tmdb api key

function searched() {
let dropdown=document.querySelector("#Language_dropdown");
let language=dropdown.options[dropdown.selectedIndex].value;
console.log("prev lang=",language);
sessionStorage.setItem("language",language);
console.log("Search entered");
const search = document.querySelector("#Movie_search_box");
const search_value = search.value;
movie_name = search_value;

url = `https://api.themoviedb.org/3/search/mov ... =${api_key}`;
fetch(url)
.then(response => response.json())
.then(parsedata)
.catch(err => console.error(err));
}



function config() {
let configuration_url = "https://api.themoviedb.org/3/configuration?api_key=xxxx";
fetch(configuration_url)
.then(response => response.json())
.then(response => {
base_urls = response.images.base_url;
console.log("base url =", base_urls);
image_size = response.images.poster_sizes[response.images.poster_sizes.length - 2];// handle image size
console.log("image size =", image_size);
})
.catch(err => console.error(err));
}



let movie_title;
let image_url;
let tmdb_id;
const img = document.querySelector(".card img");
const card_container = document.querySelector(".Results");

function parsedata(response) {
console.log(response);
card_container.innerHTML = "";
response.results.forEach(element => {
movie_title = element.original_title;
image_url = base_urls + image_size + "/" + element.backdrop_path;
tmdb_id=element.id;
console.log("Poster path", image_url);
const card = document.createElement("div");

card.classList = ["card"];
const card_content = `
<img src="${image_url}">
<h2>${movie_title}</h2>
<template>${tmdb_id}</template>`
card.innerHTML = card_content;
card_container.appendChild(card);
card.addEventListener("click", () => subpage(card));


});
}

function subpage(card) {
const children=card.children;
console.log("children=",children);
const img_src = children[0].src;
const mov_title = children[1].innerHTML;
const tmdb_id=children[2].innerHTML;
sessionStorage.setItem("img_src", img_src);
sessionStorage.setItem("mov_title", mov_title);
sessionStorage.setItem("tmdb id",tmdb_id);
window.open("subtitle.html", "_self");

}
//button.addEventListener("click", searched);

}

else {
console.log("2nd file");
const img_src = sessionStorage.getItem("img_src");
const mov_title = sessionStorage.getItem("mov_title");
const tmdb_id=sessionStorage.getItem("tmdb id");
const language=sessionStorage.getItem("language");
console.log(tmdb_id);
console.log(language);
const sec_img = document.querySelector(".subtitle .image_name img");
const sec_title = document.querySelector(".subtitle .image_name h2");

sec_img.src = img_src;
sec_title.innerHTML = mov_title;
document.title=mov_title;


const api_key_sub="xxxx"; //opensubtitles api key
const url_sub="https://api.opensubtitles.com/api/v1/su ... _id=299534";

const options={
method:'GET',
Headers:{"Api-Key":api_key_sub,
"X-User-Agent":"Subtle/1.0",
"Accept":"application/json"}
};

fetch(url_sub,options)
.then(response =>response.json())
.then(response => console.log(response))
.catch(err => console.error(err));

const goback_button=document.querySelector(".subtitle .goback");
goback_button.addEventListener("click", () => {
window.history.back();
});

}

});

I have 2 html files sharing the same script based on if condition.

[Subtitle_man]

Oh sorry you asked for html files so you could try. Here are the files:

index.html

<!DOCTYPE html>
<html lang="en">

<head>
<title>Subtle</title>
<meta name="Author" content="Mobasshir Ajaz">
<meta charset="UTF-8">
<script src="xxxx" crossorigin="anonymous"></script> /*Font awesome*/
<script src="script.js" defer></script>
<link rel="stylesheet" href="style.css">
</head>

<Body class="index">

<main>
<h1 class="Logo"><span class="Sub">Sub</span>tle<span id="fullstop">.</span></h1>

<form>
<label for="Movie_search_box" class="search_label">Search Movie</label>
<input type="text" id="Movie_search_box" placeholder="Search Movie">

<select name="Language" id="Language_dropdown">
<option value="ar">Arabic</option>
<option value="en">English</option>
<option value="hi">Hindi</option>
<option value="es">Spanish</option>
</select>

<button type="button" id="indexbutton"><i class="fas fa-magnifying-glass"></i></button>
</form>

<section class="Results">
<template>
<div class="card">
<img src="https://c4.wallpaperflare.com/wallpaper ... review.jpg" alt="Movie Thumbnail">
<h2>Loki</h2>
</div>
</template>
</section>
</main>


</Body>

</html>


subtitle.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Movie name</title>
<script src="script.js" defer></script>
<script src="xxxx.js" crossorigin="anonymous"></script> /*font awesome*/
<link rel="stylesheet" href="style.css">
</head>

<body class="subtitle">
<section class="image_name">
<img src="https://encrypted-tbn0.gstatic.com/imag ... A&usqp=CAU" alt="">
<h2>Movie Name</h2>
</section>

<section class="subtitle_section">
<div class="sub1">
<h3>Subtitle 1</h3>
<a href="#"><i class="fa-solid fa-download"></i></a>
</div>

</section>

<button action="button" class="goback">Go back</button>
</body>

</html>

[oss]

this would be much easier, if you upload it somewhere and send the link, hangover after NYE...

u can do it here
https://dropmefiles.com/

[Subtitle_man]

here's the link:

https://dropmefiles.com/VdZ73

[Subtitle_man]

The requests work in Postman(thoough inconsistently there too) just not in browser.

Also it seems there is a lot of difference in the timezone as its night here and I will probably be going to sleep. So I won't be able to reply for some time.

[oss]

Hi
i need to replicate error, so if possible, make some example, where I click and the error shows. I dont have time to put all together and try it in that way. If possible, just send main stuff and I see error on 1 click

Many sites using api.opensubtitles.com same way as you do, so there will be some small error in your code I believe.

[oss]

also if you can host it somewhere, and make new ticket (contact us) form, I can have a look. Important is I am able to replicate error

[Subtitle_man]

I hosted it on github. Here's the link:

https://mobasshirajaz.github.io/Subtle/

Just go to the website, search any movie,click any of the cards that appear. Then you should see the error. As i have only implemented the mobile view it will be better to change the view in dev tools to mobile.

[oss]

Hi

I was you using fetch (I am no JS programmer...), according https://developer.mozilla.org/en-US/doc ... sing_Fetch the headers must be in lower case, you got it as "Headers" and maybe thats the problem, because I see, no options are sent (headers)

sent is:

fetch("https://api.opensubtitles.com/api/v1/su ... _id=299534", {
"headers": {
"accept": "*/*",
"accept-language": "en-GB,en;q=0.7",
"sec-ch-ua": "\"Not_A Brand\";v=\"8\", \"Chromium\";v=\"120\", \"Brave\";v=\"120\"",
"sec-ch-ua-mobile": "?0",
"sec-ch-ua-platform": "\"macOS\"",
"sec-fetch-dest": "empty",
"sec-fetch-mode": "cors",
"sec-fetch-site": "cross-site",
"sec-gpc": "1"
},
"referrer": "https://mobasshirajaz.github.io/",
"referrerPolicy": "strict-origin-when-cross-origin",
"body": null,
"method": "GET",
"mode": "cors",
"credentials": "omit"
});

you can use dev tools and see headers are not send. so that 403 what you getting is actually:

<!DOCTYPE html>
<html>
<head>
<title>403 User-Agent header is wrong; set it to YOUR App name with version eg: MyApp v1.2.3</title>
</head>
<body>
<h1>Error 403 User-Agent header is wrong; set it to YOUR App name with version eg: MyApp v1.2.3</h1>
<p>User-Agent header is wrong; set it to YOUR App name with version eg: MyApp v1.2.3</p>
<h3>Guru Meditation:</h3>
<p>XID: 103403699</p>
<hr>
<p>Varnish cache server</p>
</body>
</html>

that means X-User-Agent is not sent...

hope this fix your problem

[Subtitle_man]

Yes!! Thanks it fixed the issue.

Such a small mistake. Feeling stupid.