Add Cloudflare worker CORS proxy

This commit is contained in:
Josh Heng 2021-08-30 11:46:39 +01:00
parent 265d33d24b
commit b9033edb75
6 changed files with 125 additions and 8 deletions

1
.env Normal file
View File

@ -0,0 +1 @@
REACT_APP_CORS_PROXY_URL=https://PROXY.workers.dev?destination=

View File

@ -6,6 +6,7 @@ Small web app for watching movies easily. Check it out at **[movie.squeezebox.de
## Credits ## Credits
- Thanks to [@JipFr](https://github.com/JipFr) for initial work on [movie-cli](https://github.com/JipFr/movie-cli) - Thanks to [@JipFr](https://github.com/JipFr) for initial work on [movie-cli](https://github.com/JipFr/movie-cli)
- Thanks to [@mrjvs](https://github.com/mrjvs) for help porting to React, and for the beautiful design - Thanks to [@mrjvs](https://github.com/mrjvs) for help porting to React, and for the beautiful design
- Thanks to [@JoshHeng](https://github.com/JoshHeng/) for the Cloudflare CORS Proxy and URL routing
## Installation ## Installation
To run this project locally for contributing or testing, run the following commands: To run this project locally for contributing or testing, run the following commands:
@ -18,5 +19,8 @@ yarn start
``` ```
To build production files, simply run `yarn build`. To build production files, simply run `yarn build`.
## Environment
* `REACT_APP_CORS_PROXY_URL` - The Cloudflare CORS Proxy, will be something like `https://PROXY.workers.dev?destination=`
## Contributing ## Contributing
Check out [this project's issues](https://github.com/JamesHawkinss/movie-web/issues) for inspiration for contribution. Pull requests are always welcome. Check out [this project's issues](https://github.com/JamesHawkinss/movie-web/issues) for inspiration for contribution. Pull requests are always welcome.

View File

@ -1,7 +1,6 @@
import { unpack } from '../util/unpacker'; import { unpack } from '../util/unpacker';
const CORS_URL = 'https://movie-web-proxy.herokuapp.com/'; const BASE_URL = `${process.env.REACT_APP_CORS_PROXY_URL}https://gomo.to`;
const BASE_URL = `${CORS_URL}https://gomo.to`;
const MOVIE_URL = `${BASE_URL}/movie` const MOVIE_URL = `${BASE_URL}/movie`
const DECODING_URL = `${BASE_URL}/decoding_v3.php` const DECODING_URL = `${BASE_URL}/decoding_v3.php`
@ -10,7 +9,7 @@ async function findContent(searchTerm, type) {
if (type !== 'movie') return; if (type !== 'movie') return;
const term = searchTerm.toLowerCase() const term = searchTerm.toLowerCase()
const imdbRes = await fetch(`${CORS_URL}https://v2.sg.media-imdb.com/suggestion/${term.slice(0, 1)}/${term}.json`).then(d => d.json()) const imdbRes = await fetch(`${process.env.REACT_APP_CORS_PROXY_URL}https://v2.sg.media-imdb.com/suggestion/${term.slice(0, 1)}/${term}.json`).then(d => d.json())
const results = []; const results = [];
imdbRes.d.forEach((e) => { imdbRes.d.forEach((e) => {
@ -68,7 +67,7 @@ async function getStreamUrl(slug, type, season, episode) {
}).then((d) => d.json()); }).then((d) => d.json());
const embedUrl = src.find(url => url.includes('gomo.to')); const embedUrl = src.find(url => url.includes('gomo.to'));
const site2 = await fetch(`${CORS_URL}${embedUrl}`).then((d) => d.text()); const site2 = await fetch(`${process.env.REACT_APP_CORS_PROXY_URL}${embedUrl}`).then((d) => d.text());
const parser = new DOMParser(); const parser = new DOMParser();
const site2Dom = parser.parseFromString(site2, "text/html"); const site2Dom = parser.parseFromString(site2, "text/html");

View File

@ -1,8 +1,7 @@
import Fuse from 'fuse.js' import Fuse from 'fuse.js'
import JSON5 from 'json5' import JSON5 from 'json5'
const CORS_URL = `https://movie-web-proxy.herokuapp.com`; const BASE_URL = `${process.env.REACT_APP_CORS_PROXY_URL}https://lookmovie.io`;
const BASE_URL = `${CORS_URL}/https://lookmovie.io`;
async function findContent(searchTerm, type) { async function findContent(searchTerm, type) {
const searchUrl = `${BASE_URL}/${type}s/search/?q=${encodeURIComponent(searchTerm)}`; const searchUrl = `${BASE_URL}/${type}s/search/?q=${encodeURIComponent(searchTerm)}`;

View File

@ -111,8 +111,7 @@ export function SearchView() {
React.useEffect(() => { React.useEffect(() => {
async function fetchHealth() { async function fetchHealth() {
const HOME_URL = "https://movie-web-proxy.herokuapp.com" await fetch(process.env.REACT_APP_CORS_PROXY_URL).catch(() => {
await fetch(HOME_URL).catch(() => {
// Request failed; source likely offline // Request failed; source likely offline
setErrorStatus(`Our content provider is currently offline, apologies.`) setErrorStatus(`Our content provider is currently offline, apologies.`)
}) })

115
worker.js Normal file
View File

@ -0,0 +1,115 @@
const corsHeaders = {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "GET,HEAD,POST,OPTIONS",
"Access-Control-Max-Age": "86400",
}
const allowedDomains = [
'https://v2.sg.media-imdb.com',
'https://gomo.to',
'https://lookmovie.io',
'https://gomoplayer.com'
];
async function handleRequest(request, destinationUrl, iteration = 0) {
console.log(`PROXYING ${destinationUrl}${iteration ? ' ON ITERATION ' + iteration : ''}`);
// Rewrite request to point to API url. This also makes the request mutable
// so we can add the correct Origin header to make the API server think
// that this request isn't cross-site.
request = new Request(destinationUrl, request);
request.headers.set("Origin", new URL(destinationUrl).origin);
let response = await fetch(request);
if ((response.status === 302 || response.status === 301) && response.headers.get('location')) {
if (iteration > 5) {
event.respondWith(
new Response('418 Too many redirects', {
status: 418
}),
);
}
return await handleRequest(request, response.headers.get('location'), iteration + 1)
}
// Recreate the response so we can modify the headers
response = new Response(response.body, response);
// Set CORS headers
response.headers.set("Access-Control-Allow-Origin", '*');
// Append to/Add Vary header so browser will cache response correctly
response.headers.append("Vary", "Origin");
return response;
}
function handleOptions(request) {
// Make sure the necessary headers are present
// for this to be a valid pre-flight request
let headers = request.headers;
if (headers.get("Origin") !== null && headers.get("Access-Control-Request-Method") !== null && headers.get("Access-Control-Request-Headers") !== null ) {
return new Response(null, {
headers: {
...corsHeaders,
// Allow all future content Request headers to go back to browser
// such as Authorization (Bearer) or X-Client-Name-Version
"Access-Control-Allow-Headers": request.headers.get("Access-Control-Request-Headers"),
},
});
}
else {
// Handle standard OPTIONS request
return new Response(null, {
headers: {
Allow: "GET, HEAD, POST, OPTIONS",
},
})
}
}
addEventListener("fetch", event => {
const request = event.request
const url = new URL(request.url);
const destinationUrl = url.searchParams.get("destination");
console.log(`HTTP ${request.method} - ${request.url}` );
if (request.method === "OPTIONS") {
// Handle CORS preflight requests
event.respondWith(handleOptions(request));
}
else if (!destinationUrl) {
event.respondWith(
new Response('200 OK', {
status: 200,
headers: {
'Allow': "GET, HEAD, POST, OPTIONS",
'Access-Control-Allow-Origin': '*'
},
}),
);
}
else if (!allowedDomains.find(domain => destinationUrl.startsWith(domain))) {
event.respondWith(
new Response('404 Not Found', {
status: 404,
}),
);
}
else if (request.method === "GET" || request.method === "HEAD" || request.method === "POST") {
// Handle request
event.respondWith(handleRequest(request, destinationUrl));
}
else {
event.respondWith(
new Response('404 Not Found', {
status: 404,
}),
);
}
});