Angular 5跨域错误求助：新手开发者代码问题咨询

Hey there! As an Angular developer who's dealt with plenty of CORS headaches, let's tackle this problem step by step.

First, Why You're Seeing the CORS Error #

The browser's Same-Origin Policy blocks your frontend from making requests to https://www.facebook.com directly because:

• Your Angular app is running on a different origin (like http://localhost:4200) than Facebook's domain
• Facebook's servers don't include CORS headers that allow your origin to access their resources

Solution 1: Use Angular Proxy (For Development Only) #

Angular has a built-in proxy setup to bypass CORS during development. Here's how to set it up:

1. Create a proxy.conf.json file in your project root with this content:

   {
     "/facebook-proxy": {
       "target": "https://www.facebook.com",
       "secure": true,
       "changeOrigin": true,
       "pathRewrite": {
         "^/facebook-proxy": ""
       }
     }
   }
   

2. Update your component code to use the proxy path instead of the direct Facebook URL:

   import { HttpClient, HttpHeaders } from '@angular/common/http';
   import { OnInit, Component } from '@angular/core';
   
   export class FaceProfilComponent implements OnInit {
     domparser = new DOMParser();
     doc: HTMLDocument;
     element: any;
   
     constructor(private http: HttpClient) {}
   
     getID() {
       const url = '/facebook-proxy/zuck'; // Use proxy path here
       this.http.get(url, {
         withCredentials: true,
         responseType: 'text',
         headers: new HttpHeaders({
           'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36'
         })
       }).subscribe(data => {
         this.doc = this.domparser.parseFromString(data, 'text/html');
         this.element = this.doc.getElementsByTagName('meta')[5].content;
         console.log(this.element);
       });
     }
   
     ngOnInit(): void {
       this.getID();
     }
   }
   

3. Start your Angular app with the proxy config:

   ng serve --proxy-config proxy.conf.json
   

Solution 2: Backend Proxy (For Production) #

The Angular proxy only works in development. For production, you'll need to create a simple backend service to forward the request (backend servers aren't restricted by the Same-Origin Policy).

Here's a quick example using Node.js + Express:

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

app.get('/fetch-facebook-zuck', async (req, res) => {
  try {
    const response = await axios.get('https://www.facebook.com/zuck', {
      headers: {
        'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36'
      }
    });
    res.send(response.data);
  } catch (error) {
    res.status(500).send('Failed to fetch data');
  }
});

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

Then update your Angular code to request your backend endpoint:

const url = 'http://your-backend-domain.com/fetch-facebook-zuck';

Important Notes #

• Facebook's Anti-Scraping: Facebook actively blocks non-browser requests, so adding a valid User-Agent header (like in the examples) is crucial to avoid getting a 403 or empty response.
• Use Official APIs: Instead of parsing HTML (which is fragile if Facebook changes their page structure), consider using Facebook's official Graph API to fetch user data legally and reliably.

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