Angular漫画网站部署GitHub后调用Mangadex API遇CORS问题求解决

一、CORS问题的具体解决方法 #

1. 本地开发阶段的Angular代理配置 #

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

{
  "/mangadex-api": {
    "target": "https://api.mangadex.org",
    "secure": true,
    "changeOrigin": true,
    "pathRewrite": {
      "^/mangadex-api": ""
    }
  }
}

接着修改angular.json里的serve配置，添加代理文件路径：

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

之后所有API请求把https://api.mangadex.org/xxx替换成/mangadex-api/xxx，本地启动项目时，Angular会自动转发请求，避开浏览器的CORS拦截。

2. GitHub Pages部署后的代理方案 #

GitHub Pages是静态托管，没法运行本地代理，得用外部代理：

方案A：Cloudflare Workers代理

写一个极简的Worker脚本，用来转发Mangadex请求：

addEventListener('fetch', event => {
  event.respondWith(proxyRequest(event.request))
})

async function proxyRequest(req) {
  const url = new URL(req.url)
  const target = `https://api.mangadex.org${url.pathname}${url.search}`
  const proxyReq = new Request(target, {
    method: req.method,
    headers: req.headers,
    body: req.body,
    redirect: 'follow'
  })
  return fetch(proxyReq)
}

部署这个Worker后，把项目里的API地址改成Worker的域名，请求会通过Worker转发，绕过CORS。同时图片请求也得走这个代理，这样能避开Mangadex的防盗链。

方案B：自建Node.js代理

用Express搭个简单代理服务器：

const express = require('express')
const proxy = require('http-proxy-middleware')
const app = express()

app.use('/mangadex-proxy', proxy({
  target: 'https://api.mangadex.org',
  changeOrigin: true,
  pathRewrite: { '^/mangadex-proxy': '' }
}))

app.listen(process.env.PORT || 3000)

把这个服务器部署到Vercel、Heroku这类免费平台，然后修改Angular项目的请求地址指向代理服务器的域名。

3. CORS扩展导致推广图的原因 #

Mangadex有防盗链机制，就算用CORS扩展绕过了API的CORS限制，图片请求的Referer还是你的GitHub Pages域名，Mangadex会识别出非官方来源，返回推广图而非真实漫画图片。只有通过代理转发图片请求，让请求的来源变成代理服务器的域名，才能拿到真实图片。

二、关于Mangadex API限制的原因 #

1. 版权保护：漫画内容受版权约束，Mangadex通过防盗链和CORS限制，引导用户到官方平台阅读，避免未经授权的网站滥用版权内容。
2. 资源管控：直接从前端大量请求API和图片会给Mangadex服务器带来巨大负载，通过代理要求开发者自行承担部分转发成本，同时便于平台追踪和限制恶意爬虫、滥用行为。
3. API使用规范：公共API允许非商业的合法使用，但平台需要通过这些限制来维持服务的稳定性，防止资源被无节制消耗。

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