如何用HTTP Client的GET方法获取谷歌搜索结果转JSON遇跨域问题？

Hey there, let's walk through your issue and figure out how to fix it!

First, let's break down the two key problems you're facing:

1. CORS Error: The No 'Access-Control-Allow-Origin' header is present error happens because of the browser's Same-Origin Policy. Browsers block frontend requests to external domains (like google.com) unless the target server explicitly allows your domain via the Access-Control-Allow-Origin HTTP header. Google's gen_204 endpoint doesn't allow cross-origin requests from arbitrary frontend domains, so the browser blocks the response.
2. Wrong Endpoint: The gen_204 URL you're using isn't meant to return search results at all—it's a utility endpoint Google uses for things like traffic analytics and heartbeat checks. Even if you fixed the CORS issue, this endpoint wouldn't give you the JSON-formatted search results you want.

Here are the legitimate, practical ways to achieve your goal:

1. Use a Server-Side Proxy #

Since browsers enforce CORS but server-side requests don't, you can set up a simple proxy server to act as a middleman between your frontend and Google's API. Here's a quick example with Node.js/Express:

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

// Proxy endpoint for Google search
app.get('/api/google-search', async (req, res) => {
  try {
    // Use Google's official Custom Search API (requires API key + CX ID)
    const searchResponse = await axios.get('https://www.googleapis.com/customsearch/v1', {
      params: {
        key: 'YOUR_GOOGLE_API_KEY',
        cx: 'YOUR_CUSTOM_SEARCH_ENGINE_ID',
        q: req.query.searchTerm // Pass the search keyword from frontend
      }
    });
    res.json(searchResponse.data);
  } catch (error) {
    res.status(error.response?.status || 500).json(error.response?.data || { message: 'Error fetching results' });
  }
});

app.listen(3000, () => console.log('Proxy server running on http://localhost:3000'));

Then update your Angular frontend to call your proxy instead of Google directly:

constructor(private http: HttpClient) { 
  this.http.get(`http://localhost:3000/api/google-search?searchTerm=your-search-query`)
    .subscribe(results => console.log(results)); 
}

2. Use Google's Official Custom Search JSON API #

Google provides a formal API for fetching search results in JSON format. To use it:

• Sign up for a Google Cloud account and get an API key
• Create a custom search engine to get a CX ID
• Use the official endpoint (like the one in the proxy example above) to request results

Note: This API has free usage limits, and you'll need to pay for additional requests beyond that.

3. Avoid Unauthorized Scraping #

Important: Google's Terms of Service prohibit scraping their search results via non-official endpoints. Using endpoints like gen_204 not only won't work for your use case but could lead to your IP being blocked. Stick to official APIs to stay compliant.

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