Teach Web Development
Without CORS Headaches

// Teaching students to fetch external API data
const CORS_PROXY = 'https://corsproxy.io/?url=';

// Without proxy - blocked by CORS
fetch('https://api.github.com/users/octocat')
  .catch(err => console.error('CORS error!'));

// With proxy - works everywhere
fetch(CORS_PROXY + encodeURIComponent('https://api.github.com/users/octocat'))
  .then(response => response.json())
  .then(data => console.log('User:', data.login));

// jQuery example from DCU curriculum
var url  = 'https://api.example.com/data';
var curl = 'https://corsproxy.io/?' + encodeURIComponent(url);

$.get(curl, function(data) {
  // Student can now work with the data
  console.log('Fetched:', data);
  $('#result').html(JSON.stringify(data, null, 2));
});

// JMU CS 343 - Parallel Fetches Activity
const PROXY = 'https://corsproxy.io/?url=';

// Fetch multiple APIs simultaneously
const apis = [
  'https://api.github.com/users/octocat',
  'https://jsonplaceholder.typicode.com/posts/1',
  'https://httpbin.org/get'
];

Promise.all(apis.map(url =>
  fetch(PROXY + encodeURIComponent(url))
    .then(res => res.json())
))
.then(results => {
  console.log('All data loaded:', results);
});