CORS Issue, requests from angular app are blocked #7558

Discussions
1

This discussion has been migrated from our Github Discussion #7558

VukMNE107d ago

Issue
Hello,
I am getting my requests blocked by CORS when try to send requests from angular app.

Error

Access to XMLHttpRequest at ‘http://localhost:1337/posts?position.id=2&_start=0&_limit=3&_sort=updated_at:DESC’ from origin ‘http://localhost:4200’ has been blocked by CORS policy: Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response.

Steps to reproduce the behavior

  1. Start Strapi development mode
  2. Start your Angular UI on same server
  3. API calls to Strapi via Angular are blocked in browser by CORS

Expected behavior
After enabling CORS in Strapi and adding headers on Angular and or nginx the request should not be blocked via CORS.

Code snippets
Here are the examples of imporant files.

{
    "cors": {
    "enabled": true,
    "origin": "*",
    "expose": [
        "WWW-Authenticate",
        "Server-Authorization",
        "Access-Control-Expose-Headers"
     ],
    "maxAge": 31536000,
    "credentials": true,
    "methods": [
      "GET",
      "POST",
      "PUT",
      "PATCH",
      "DELETE",
      "OPTIONS",
      "HEAD"
    ],
    "headers": [
      "Content-Type",
      "Authorization",
      "X-Frame-Options",	  
      "Origin",
      "Access-Control-Allow-Headers",
      "access-control-allow-origin"
    ]
  }
}

System

  • Node.js version: v10.16.3
  • NPM version: v6.9.0
  • Strapi version: 3.1.3
  • Operating system: Windows 10
2

Responses to the discussion on Github

derrickmehaffy107d ago

Collaborator

The default settings for CORs shouldn’t cause you issues, but it also looks like you are setting them in the wrong file.

VukMNE107d ago

Author

@derrickmehaffy Thank you for attention and responding.

The file security.json that I wrote this setting is located in: config/environments/development

VukMNE106d ago

Author

@derrickmehaffy I undestand your disbelief, but I did everything according to the strapi documentation, and the requests from angular app are still getting blocked.

derrickmehaffy105d ago

Collaborator

I see the confusion here, you are using the old beta docs but are using the stable release, in which case the relevant docs are: https://strapi.io/documentation/v3.x/concepts/middlewares.html#security-middlewares

VukMNE105d ago

Author

Thanks for the reply.

Unfortunately, I still have the same problem.

Here is my ./config/middleware.js

module.exports = {
  settings: {
    cors: {
	  enabled: true,
      origin: ['*']
    }
  }
};

error_strapi

Here is my strapi project.

Here is my angular app.

If you run both of these projects on your computer, you will get the error from the picture above.

derrickmehaffy104d ago

Collaborator

Hi @VukMNE So in looking through both projects, in your ztk-sajt/src/app/shared/services/data.service.ts You have two headers set that shouldn’t be sent from the angular app.

On lines 19 and 20:

  constructor(private http: HttpClient) {
    this.config = new Config();
    this.baseUrl = this.config.baseUrl;
    this.header = new HttpHeaders({
      'Content-Type': 'application/json',
      // 'Access-Control-Allow-Headers': '*',
      // 'Access-Control-Allow-Origin': '*'
    });
  }

You are sending two Access-Control-Allow-* headers from the angular app to Strapi, these should never be sent in a Request and are only send in a response. Angular should only send Access-Control-Request-* and Strapi will respond with Access-Control-Allow-* headers.

VukMNE104d ago

Author

I see, thanks. It works smoothly without those headers now.

petersg83104d ago

Maintainer

Hi :slight_smile:
I think you missed some parts in the migration guide: https://strapi.io/documentation/v3.x/migration-guide/migration-guide-beta.20-to-3.0.0.html#middlewares

Can you please move your security.json file to ./config/env/development/middleware.js ?

Update content:

module.exports = {
  settings: {
    cors: {
      enabled: true,
      origin: '*',
      expose: ['WWW-Authenticate', 'Server-Authorization', 'Access-Control-Expose-Headers'],
      maxAge: 31536000,
      credentials: true,
      methods: ['GET', 'POST', 'PUT', 'PATCH', 'DELETE', 'OPTIONS', 'HEAD'],
      headers: [
        'Content-Type',
        'Authorization',
        'X-Frame-Options',
        'Origin',
        'Access-Control-Allow-Headers',
        'access-control-allow-origin',
      ],
    },
  },
};

VukMNE104d ago

Author

Thanks. After moving file to this location, it is working smoothly now :slight_smile:

ducdk23d ago

i config in ./config/env/product/middleware.js but not working