Skip to content
Proxify
For teaching and learning

Teach fetch and APIs, not CORS workarounds

Students learning to call APIs hit CORS errors in their first hour. Proxify lets them use real APIs from localhost and online editors, while you keep usage in check.

Create an account Try the playground
Browser console, calling the API directly

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.

The same request through Proxify 
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 Proxify 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.
Proxy reference
lesson-3.js 
// 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. Proxify 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.

More solutions

Make the request your browser was blocking.

Create an account, lock your key to your site, and send your first request through Proxify.

Create an account Read the docs

Are you sure?