Angular应用调用Azure Retail Price Api遇CORS问题如何解决？

方案1：用Angular开发代理搞定本地环境 #

浏览器的CORS限制只针对前端发起的跨域请求，Angular CLI自带的代理可以把前端请求伪装成同源请求，绕开限制。步骤：

1. 在项目根目录新建proxy.conf.json，写入以下配置：

{
  "/api/retail": {
    "target": "https://prices.azure.com",
    "secure": true,
    "changeOrigin": true,
    "pathRewrite": {
      "^/api/retail": "/api/retail"
    }
  }
}

2. 打开angular.json，找到serve配置项，添加proxyConfig指向刚才的文件：

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "你的项目名称:build",
    "proxyConfig": "proxy.conf.json"
  }
}

3. 修改Angular里的请求地址，把原来的https://prices.azure.com/api/retail/prices?$filter=...改成/api/retail/prices?$filter=...
4. 重启Angular开发服务器，现在请求会通过代理转发，不会触发CORS错误。

方案2：后端中转请求适配生产环境 #

开发代理只适合本地调试，上线后得靠自己的后端服务做中转：

• 用你熟悉的后端技术（Node.js、.NET、Java都行）写一个接口，比如/api/azure-prices
• 前端调用自己的后端接口，后端再去请求Azure的零售价格API，把响应原封不动（或按需处理）返回给前端
• 服务器之间的请求不受浏览器CORS限制，还能顺便加缓存、权限校验这些优化。

举个Node.js（Express）的简单示例：

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

app.get('/api/azure-prices', async (req, res) => {
  try {
    const azureResponse = await axios.get('https://prices.azure.com/api/retail/prices', {
      params: req.query // 直接传递前端的filter参数
    });
    res.send(azureResponse.data);
  } catch (err) {
    res.status(err.response?.status || 500).send(err.response?.data || '请求失败');
  }
});

app.listen(3000, () => console.log('中转服务运行在3000端口'));

之后Angular里就请求http://你的后端域名/api/azure-prices?$filter=serviceName eq 'SQL Database' and armRegionName eq 'centralus' and skuName eq '6 vCore'就行。

方案3：确认Azure API是否支持自定义CORS（可能性低） #

部分Azure服务允许配置CORS规则，但Azure零售价格API是公共开放的，大概率不支持自定义允许的域名。如果想确认，可以查官方文档，要是支持的话，把你的前端域名加到CORS允许列表里就行——不过这个方案基本不用抱太大期望。

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