从源“http://localhost:4200”访问“https://exam.com/api/Uni/GetAll”的 XMLHttpRequest 已被 CORS 策略阻止

Posted 2023-02-27

【中文标题】从源“http://localhost:4200”访问“https://exam.com/api/Uni/GetAll”的 XMLHttpRequest 已被 CORS 策略阻止

【英文标题】：Access to XMLHttpRequest at 'https://exam.com/api/Uni/GetAll' from origin 'http: // localhost: 4200' has been blocked by CORS policy

【发布时间】：2021-04-08 07:47:20

【问题描述】：

我使用 Angular 9 创建了我的项目，我将服务器端上传到了两台主机，我将请求发送到 Windows 主机，一切正常，但是当我将请求发送到 Linux 主机时，出现以下错误 Encounters.

Access to XMLHttpRequest at 'https://exam.com/api/Uni/GetAll' from origin 'http: // localhost: 4200' has been blocked by CORS policy: Response to preflight request does not pass access control check : It does not have HTTP ok status.

可能是什么问题？我是否必须在服务器端或 Angular 中更改托管设置？

顺便说一句，在我发送请求的帖子中，没关系，但是对于 Angular 项目。

@NgModule(
  declarations: [
    AppComponent, HomeComponent, NewsComponent, MainAdminComponent, PageNotFoundComponentو...
  ],
  imports: [
    BrowserModule.withServerTransition( appId: 'serverApp' ), AppRoutingModule, FormsModule, BrowserAnimationsModule, ReactiveFormsModule,
    HttpClientModule, OwlModule, RichTextEditorAllModule, DialogModule,...
  ],
  providers: [
     provide: DateAdapter, useClass: MaterialPersianDateAdapter, deps: [MAT_DATE_LOCALE] ,
     provide: MAT_DATE_FORMATS, useValue: PERSIAN_DATE_FORMATS ,
    provide:LocationStrategy,useClass:HashLocationStrategy
  ],
  bootstrap: [AppComponent]
)

【问题讨论】：

exam.com/api/Uni/GetAll 在尝试访问它时返回“404 – 未找到”，这可以解释 AJAX 错误（因为它需要在执行 OPTIONS 请求时返回 200）。这在 Windows 和 macOS 上都会发生在我身上。

您的后端同事必须设置所谓的 CORS 标头。如果后端是 NestJS，那会有所帮助：docs.nestjs.com/security/cors

bakend 这边的朋友不接受问题出在他们这边，会不会是 Linux 主机设置的问题？

该错误显然与“CORS”相关。这意味着这取决于您的网络服务器拒绝您的来源。所以我认为这与您的网络服务器配置有关，与 linux 系统配置（例如防火墙）无关。这是一个很好的解释 CORS 是如何工作的：***.com/questions/36958999/…

【参考方案1】：

我认为问题出在服务器端（后端主机）。你确定两台主机（windos & linux）上的代码是一样的吗？

我遇到此错误主要是由于后端设置不正确。

每当您从frontend 向backend 发出请求时，由于它们都是两个不同的来源，您就会遇到 CORS 问题。 您必须在后端启用（配置）CORS plocity。

这是Node.Js (express) 后端的示例 - 启用所有 CORS 请求：

var express = require('express')
var cors = require('cors')
var app = express()

app.use(cors())

app.get('/products/:id', function (req, res, next) 
  res.json(msg: 'This is CORS-enabled for all origins!')
)

app.listen(80, function () 
  console.log('CORS-enabled web server listening on port 80')
)

完整指南：https://expressjs.com/en/resources/middleware/cors.html

其他网络服务器的另一个有用链接：https://enable-cors.org/server.html

我找到了一个很好的解释 CORS 是如何工作的：CORS - Is it a client-side thing, a server-side thing, or a transport level thing?

【讨论】：

bakend 这边的朋友不接受问题出在他们这边，会不会是 Linux 主机设置的问题？

【参考方案2】：

这不是前端问题，只要你发送后端需要的标头（例如jwt token），那么问题应该通过启用cors请求来解决。