CORS Issue, requests from angular app are blocked #7558

This discussion has been migrated from our Github Discussion #7558

VukMNE107d ago

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


Access to XMLHttpRequest at ‘http://localhost:1337/posts?’ 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": [
    "maxAge": 31536000,
    "credentials": true,
    "methods": [
    "headers": [


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

Responses to the discussion on Github

derrickmehaffy107d ago


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


@derrickmehaffy Thank you for attention and responding.

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

VukMNE106d ago


@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


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:

VukMNE105d ago


Thanks for the reply.

Unfortunately, I still have the same problem.

Here is my ./config/middleware.js

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


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


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


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

petersg83104d ago


Hi :slight_smile:
I think you missed some parts in the migration guide:

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: [

VukMNE104d ago


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