Angular 中如何修复跨域 (CORS) 问题

当前位置：主页 > 学无止境 > 网络 >

WEB前端编程语言网络算法操作系统数据库

Angular 中如何修复跨域 (CORS) 问题

作者：迹忆客最近更新：2023/01/08 浏览次数：

当我们在开发期间为 Angular 应用程序使用后端服务器时，当尝试从 API 请求资源时，我们可能会遇到一些跨域（CORS）限制，这些限制会阻止我们从 API 访问数据。

在本篇文章中，我们将快速了解如何使用两种不同的方案轻松解决此问题。

但首先，为了更好地解决问题，我们需要先更好地理解问题。首先，什么是CORS？如果不关心此问题的话。跳转到如何修复部分。

什么是跨域 CORS

跨域资源共享（简称 CORS）是一种机制，它使用额外的 HTTP 标头告诉浏览器让在一个域中运行的 Web 应用程序有权访问来自不同域的服务器的选定资源。

例如，如果应用程序托管在 https://domain-a.com 上，并且我们向 https://api.domain-b.com/data.json 发出 fetch 请求，如果服务器不允许跨域资源共享，那么可能会遇到 CORS 错误，因为我们从域 -a 上向域 -b 请求资源。

为什么跨域会发生

出于安全原因，浏览器会限制从脚本中发起的跨域 HTTP 请求。例如，XMLHttpRequest 和 Fetch API 遵循同源策略。这意味着使用这些 API 的 Web 应用程序只能从加载应用程序的同一源请求 HTTP 资源，除非来自其他源的响应包含正确的 CORS 标头。

如何修复跨域问题

在解决 Angular 应用程序中的 CORS 问题时，我们可以通过两种不同的方式解决该问题：

使用 Angular CLI 代理

我们可以使用 Webpack 提供的代理解决 CORS 问题。首先，打开 Angular 项目并在 src 目录中创建一个名为 proxy.conf.json 的新文件，其内容如下：

{
    "/api": {
        "target": "http://localhost:3000",
        "secure": false
    }
}

这将告诉我们的开发服务器代理将 /api 端点发出的任何请求转发到 localhost:3000。这个文件本质上是使用 Webpack 的 devServer.proxy 的配置。

接下来，我们需要通过 angular.json 使用 proxyConfig 键将 Angular 指向此文件，从而让 Angular 了解我们的代理配置：

"architect": {
    "serve": {
        "builder": "@angular-devkit/build-angular:dev-server",
        "options": {
            "browserTarget": "your-application-name:build",
            "proxyConfig": "src/proxy.conf.json"
       }
    }
}

最后，配置到位后，现在我们应该能够在没有 CORS 问题的情况下为应用程序提供服务。如果需要更改代理配置，请确保在这样做后重新启动我们的开发环境。

$ ng serve

使用正确的标头 - headers

CORS 问题也可以通过从服务器发送正确的 HTTP 标头来解决。大多数语言和框架已经提供了现有的包或 API 从而以简单的方式配置正确的标头。例如，如果使用 Express，则可以使用 cors 包来解决 CORS 错误：

const express = require('express');
const cors = require('cors');
const app = express();
 
app.use(cors());

这样就可以轻松解决跨域资源共享的问题了。

迹忆客专注技术分享