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

  • Z时代
  • 2024-01-10
  • 分类：综合

当我们在开发期间为 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-代理">

使用 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());

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

推荐阅读：

  • Ajax跨域Cookie相关设置

  • php+ajax实现跨域单点登录

本文转载自：迹忆客（https://www.jiyik.com）

以上是 Angular 中 如何修复跨域 (CORS) 问题 的全部内容， 来源链接： utcz.com/z/290309.html

回到顶部