为啥即使在我们调用其余调用的同一台服务器上运行 Angular 应用程序也会出现 cors 问题

Posted 2023-03-04

【中文标题】为啥即使在我们调用其余调用的同一台服务器上运行 Angular 应用程序也会出现 cors 问题

【英文标题】：why cors issue coming even though angular application running on the same server from where we are calling the rest call为什么即使在我们调用其余调用的同一台服务器上运行 Angular 应用程序也会出现 cors 问题

【发布时间】：2019-03-27 04:51:09

【问题描述】：

我在本地机器上开发了 Angular 应用程序。 在我的应用程序中，我正在调用 rest 来获取数据。 所以在我的本地机器上，我遇到了 CORS 问题。 但是当我在具有相同端口的同一台服务器上部署这个角度应用程序时 即rest api和我的应用程序都在具有相同端口的同一台服务器上。 REST API：-http://domain:port/api 应用网址：-http://domain:port/home

然后我在调用 rest api 时也遇到了 CORS 问题。 请解释一下如何解决这个问题。

谢谢， 苏雷什

【问题讨论】：

你能分享你如何在同一台服务器上设置rest api和angular app，以及你如何从angular app调用rest api

Rest api 是其他一些队友用java开发的，他们部署在服务器上。 Angular 应用程序是我们在本地机器上开发的，并使用“npm build --aot”生成构建，并将 dist 文件夹粘贴到部署我们的 rest api 的相同位置。这就是我们所做的。

您可能要检查的一件事是您用于与其余 API 通信的 url。如果它以 someurl/api/users 之类的开头，请尝试 /api/users，（删除前缀，即 someurl）如果 Angular 应用程序无法仅与 /api/url 通信，那么这意味着它们不在同一个来源。最后，您可能需要允许从 java 方面进行跨源访问

请使用***.com/posts/52940757/edit 编辑/更新问题并添加浏览器在开发工具控制台中记录的确切错误消息。 “我遇到了 CORS 问题” 根本不足以让任何人猜测实际问题可能是什么。但是如果您的http://domain:port/home 应用程序正在向http://domain:port/api 发出请求，而该请求实际上是在同一来源（方案+主机+端口）上，那么您就不会出现 CORS 错误。因此，要么问题是，您的应用正在调用不同来源的其他服务器，要么您遇到的任何问题都不是 CORS 问题

【参考方案1】：

在您的本地计算机上，您可以创建一个代理来重定向对 api 的调用，使其与您的 Angular 应用程序位于同一端口上。创建一个名为 proxy.conf.json 的文件并将以下内容放入其中，将 apiport 更改为您的 api 端口号。

  "/api/*": 
    "target": "http://localhost:apiport/api/",
    "pathRewrite": 
      "^/api": ""
    ,
    "changeOrigin": true,
    "secure": false,
    "logLevel": "debug"
  

然后启动应用程序

ng serve --proxy-config proxy.config.json

或将以下内容添加到 package.json 文件的脚本部分

"localstart": "ng serve --proxy-config proxy.config.json",

开始

npm run localstart

【讨论】：

我使用代理只是为了避免 cors 问题。但我的问题是为什么即使我的应用程序和 rest api 在同一台服务器（相同的域和相同的端口）上运行，我仍然会遇到 CORS 问题。即，如果我删除代理，我将无法从 rest 调用中获取数据。

您是在使用domain:port/home 从服务器运行还是在从localhost:5200 测试时遇到CORS 问题？如果是在您测试时，那是因为localhost:5200 与domain:port/api 不在同一个域中

如果我删除代理，我会在从服务器运行时遇到 CORS 问题。

代理不在服务器上运行，它只是一个本地开发概念

如何检查我的代理是否在服务器中使用？在生成构建时，我是否需要指定任何不考虑代理的内容？或者只是我需要从 package.json 文件中的 ""start": "ng serve --proxy-config proxy.config.json" 这个命令中删除选项。