Angular+Firestore项目调用第三方API遇跨域及XML转JSON问题求助

嘿，这个问题我开发时也踩过坑！其实你写的请求代码本身没毛病，问题出在**浏览器的同源策略（Same-Origin Policy）**和目标服务器的CORS配置上。

为什么会出现这个错误？ #

浏览器为了安全，会限制前端页面从不同域名（协议、域名、端口任意一项不同就算跨域）请求资源，除非目标服务器返回Access-Control-Allow-Origin响应头，允许你的前端域名访问。而http://maps.huge.info这个服务器显然没设置这个头，所以浏览器直接拦截了请求，抛出了你看到的错误。

解决方案分两种场景： #

1. 开发环境：用Angular代理转发

这是开发时最方便的解决办法，通过Angular的代理配置把请求转发到目标服务器，避开浏览器的CORS检查：

• 首先在项目根目录创建proxy.conf.json文件，内容如下：

  {
    "/zip-api/*": {
      "target": "http://maps.huge.info",
      "secure": false,
      "changeOrigin": true,
      "pathRewrite": {
        "^/zip-api": ""
      }
    }
  }
  

• 然后修改angular.json里的serve配置，添加proxyConfig：

  "architect": {
    "serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "options": {
        "browserTarget": "your-project-name:build",
        "proxyConfig": "proxy.conf.json" // 新增这一行
      }
    }
  }
  

• 最后修改你的请求代码，把目标URL换成代理路径：

  getZipData() {
    return this.http.get(`/zip-api/zipv0.pl?ZIP=32750`);
  }
  

重启Angular开发服务器，请求就能正常转发了。

2. 生产环境：用Firebase Cloud Functions做中间层

部署到生产环境后，本地代理就没用了，这时候可以用Firebase的云函数作为中间代理——因为服务器端请求不受浏览器CORS限制：

• 首先在Firebase项目里初始化云函数（如果还没弄过），然后在functions/index.js里写这个函数：

  const functions = require("firebase-functions");
  const axios = require("axios");
  
  exports.fetchZipData = functions.https.onRequest(async (req, res) => {
    try {
      const zipCode = req.query.ZIP;
      // 服务器端请求目标接口
      const response = await axios.get(`http://maps.huge.info/zipv0.pl?ZIP=${zipCode}`);
      // 设置允许跨域的响应头，也可以指定你的前端域名更安全
      res.set("Access-Control-Allow-Origin", "*");
      // 返回XML数据给前端
      res.send(response.data);
    } catch (error) {
      res.status(500).send("获取数据失败：" + error.message);
    }
  });
  

• 部署云函数后，你的Angular代码就请求这个云函数的URL：

  getZipData() {
    return this.http.get(`https://us-central1-your-firebase-project.cloudfunctions.net/fetchZipData?ZIP=32750`);
  }
  

额外步骤：XML转JSON #

拿到XML数据后，你可以用xml2js库把它转换成JSON：

• 安装依赖：npm install xml2js --save
• 在Angular组件/service里导入并使用：

  import { parseString } from 'xml2js';
  
  // ...
  
  this.getZipData().subscribe((xmlData: string) => {
    parseString(xmlData, (err, jsonResult) => {
      if (!err) {
        console.log("转换后的JSON数据：", jsonResult);
        // 这里处理你的业务逻辑
      }
    });
  });
  

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