使用XMLHttpRequest调用Codeship API时遇跨域错误求助

Hey there, that CORS error is a classic browser security restriction issue—let's walk through what's happening and how to fix it.

Why You're Seeing This Error #

When you make a request from your frontend (like using XMLHttpRequest in the browser) to a different domain (Codeship's API here), browsers enforce the Same-Origin Policy to block potentially malicious cross-site requests. Codeship's API likely isn't configured to allow direct requests from your frontend domain, especially since you've set xhr.withCredentials = true—this sends auth-related cookies/headers, which adds an extra layer of security restrictions that most public APIs don't support for frontend calls.

Your Problematic Code for Reference #

var data = "{}"; 
var xhr = new XMLHttpRequest(); 
xhr.withCredentials = true; 
xhr.addEventListener("readystatechange", function () { 
  if (this.readyState === this.DONE) { 
    console.log(this.responseText); 
  } 
}); 
xhr.open("GET", "https://api.codeship.com/v2/organizations/...");

Solutions to Fix This #

1. Use a Backend Proxy (Recommended)

The most reliable fix is to route your API request through your own backend server. Backend servers aren't bound by browser CORS rules, so they can safely call the Codeship API on behalf of your frontend—plus, this keeps sensitive credentials (like API tokens) secure on the server instead of exposing them in client-side code.

Here's a quick example using Node.js and Express (adapt this to your preferred backend stack):

const express = require('express');
const axios = require('axios');
const app = express();

app.get('/api/codeship-organizations', async (req, res) => {
  try {
    // Call Codeship API from your backend
    const response = await axios.get('https://api.codeship.com/v2/organizations/...', {
      withCredentials: true,
      // Add your Codeship API auth headers here (keep these secure!)
      headers: { 'Authorization': 'Bearer YOUR_API_TOKEN' }
    });
    res.send(response.data);
  } catch (error) {
    res.status(error.response?.status || 500).send(error.response?.data || 'Server error');
  }
});

app.listen(3000, () => console.log('Proxy server running on port 3000'));

Then your frontend would request http://localhost:3000/api/codeship-organizations instead of the Codeship API directly.

2. Verify Codeship API's CORS Support

Double-check the Codeship API docs to see if they explicitly allow frontend requests. Many APIs designed for server-to-server communication (like those requiring API keys) don't support CORS for frontend calls, since exposing keys in client-side code is a major security risk.

3. Clean Up Your Client-Side Code (Optional)

While switching to a different HTTP client won't fix the CORS issue itself, it can make your code cleaner. For example, using fetch instead of XMLHttpRequest:

fetch('https://api.codeship.com/v2/organizations/...', {
  credentials: 'include'
})
.then(response => response.text())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

Just remember: this will still hit the same CORS wall unless you use a proxy or Codeship explicitly allows your frontend domain.

内容的提问来源于stack exchange，提问作者Dawn17