Teach fetch and APIs, not CORS workarounds
Students learning to call APIs hit CORS errors in their first hour. ProxifyEdge lets them use real APIs from localhost and online editors, while you keep usage in check.
Access to fetch at 'https://api.example-weather.com/v1/forecast?city=Lahore' 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.
HTTP/2 200
access-control-allow-origin: http://127.0.0.1:5500
x-proxify-ratelimit-remaining: 9999
CORS is an important lesson, but not the first one
A beginner's first fetch() to a real API often fails with a CORS error they can't fix, because the server that would need to change isn't theirs.
Workarounds like browser extensions or disabled security flags teach the wrong habits, and often are not allowed on managed classroom machines.
How ProxifyEdge helps
Configured from the dashboard, enforced on every request.
-
Works from any editor
A test key answers any origin, so it works from localhost, the Live Server extension and online editors without registering each one.
-
Stable lessons with replay
Record an API's responses once, then replay them, so every student sees the same data and the class doesn't hit the API's rate limit.
-
Predictable usage
A monthly quota and per-second rate limit on the class key keep a loop in someone's code from using up the term's requests.
-
Teach secrets properly
Show where API tokens belong: in a server-side vault, referenced as {{secret.NAME}}, never in front-end code.
-
Safe by default
The SSRF guard refuses private and internal addresses, so a proxy shared by a class cannot be pointed at a school network.
Example
A first fetch() that works
- Students keep writing ordinary fetch() calls; only the URL changes.
- Checking response.ok first is a habit worth teaching from day one.
- Use a test key in class so it works from every student’s environment.
// lesson-3.js: fetch a forecast and show it on the page.
const target = 'https://api.example-weather.com/v1/forecast?city=Lahore';
const response = await fetch(
`https://api.proxifyedge.com/proxy?url=${encodeURIComponent(target)}`,
{ headers: { 'X-API-Key': 'pk_class_test_key' } },
);
if (!response.ok) {
console.error('The API answered with status', response.status);
} else {
const forecast = await response.json();
console.log(forecast);
}Questions
Something else? Get in touch or read the docs.
Does using a proxy hide what CORS is?
Teach both: why the browser blocks a response from another origin, and how a server you control can add the headers. ProxifyEdge is that server, and the response headers are there for students to inspect in DevTools.
Can a whole class share one key?
Yes. Every request counts against that key's quota, so set its limits for the class size. Separate accounts let you track usage per student.
Do students need to install anything?
No. They only change the URL they fetch. There is no package, extension or browser setting to change.
Can we try it without accounts?
The playground sends requests without an account, within a small shared quota. Create an account when the class needs its own key.
