0

I created my project with Angular 9, I uploaded the server side to two hosts, I send the request to the Windows host and everything is OK, but when I send the request to the Linux host, with the following error 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.

What could be the problem? Do I have to make changes to the hosting settings, either on the server side or in Angular?

By the way, with my post that I send the request, it is OK, but with the Angular project.

@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]
})
  • https://exam.com/api/Uni/GetAll returns a "404 – Not found" when trying to access it, which would explain the AJAX error (because it needs to return 200 when doing an OPTIONS request). This happens to me on both Windows and macOS. – Lasse Jan 01 '21 at 14:10
  • 1
    Your backend colleagues have to set the so-called CORS header. If the backend is NestJS, than that can help: https://docs.nestjs.com/security/cors –  Jan 01 '21 at 14:10
  • Friends on the bakend side do not accept that the problem is on their side, can it be a problem with the Linux host settings? –  Jan 02 '21 at 05:26
  • The error is clearly "CORS" related. That means it depends to your webserver rejecting your origin. So i think it's about your webserver configuration, nothing with linux system configuration (firewall e.g). Here is a great explanation how CORS works: https://stackoverflow.com/questions/36958999/cors-is-it-a-client-side-thing-a-server-side-thing-or-a-transport-level-thin – Danloc Jan 02 '21 at 11:24

2 Answers2

2

I think the problem is on the server side (backend host). Are you sure that the code on both hosts (windos & linux) is the same?

I encountert this error mostly due to incorrect backend settings.

Whenever you make a request from frontend to backend, cause they both are two different origins, you get a CORS issue. You have to enable (configure) CORS plocity on the backend.

Here is a example for Node.Js (express) backend - Enable All CORS Requests:

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')
})

Full guide: https://expressjs.com/en/resources/middleware/cors.html

Another usefull link for other webserver: https://enable-cors.org/server.html

I found a gread explanation how CORS works: CORS - Is it a client-side thing, a server-side thing, or a transport level thing?

Danloc
  • 368
  • 3
  • 10
  • Friends on the bakend side do not accept that the problem is on their side, can it be a problem with the Linux host settings? –  Jan 02 '21 at 05:26
0

It's not a frontend issue, as long as you send the headers that the backend are requiring(ex. jwt token) , then the problems should solve by enable cors request.

Olaru Alina
  • 458
  • 4
  • 8