Custom strapi Access-Control-Allow-Origin

Questions and Answers Strapi Backend
1
System Information
  • Strapi Version: 4.1.3
  • Operating System: macos
  • Database: mysql
  • Node Version: 14.18.1
  • NPM Version: 6.14.15
  • Yarn Version: 1.22.17

I’m trying to add headers in strapi middlewares but i don’t know why strapi can’t accept that keys:

  {
    name: 'strapi::cors',
    config: {
      enabled: true,
      header: ['accept-language', 'Content-Type', 'Authorization', 'Accept', 'X-Timezone', 'X-Timezone-Name'],
      origin: ['http://localhost:1337', 'http://localhost:8080', 'https://dev.api.hoidapthuoc.com']
    }
  },

Screen Shot 2022-03-28 at 09.54.37

2

Were you able to solve it? I have the same problem

3

Any luck here?

4

you can check my code below

5

yes, sorry for late reply, i custom it at strapi-server.js
you can check my code below
{ name: 'strapi::cors', config: { headers: [ 'accept-language', 'Token', 'Content-Type', 'Authorization', 'Accept', 'Origin', ], origin: [ 'http://localhost:8080', 'https://dev.api.hoidapthuoc.com', 'http://localhost:1337', 'http://localhost:8000', 'https://dev.hoidapthuoc.com', ], }, },

1 Like
6

Will this work with Strapi V4? I have the exact same problem except my client frontend is Angular.

7

yes, it is i’m currently using strapi v4.3.0

8

tôi cung bị vấn đề này , cấu hình mãi vẫn không được,
v4.6.1

9

CORS is a security mechanism implemented by web browsers to restrict cross-origin requests. It requires the server to include specific headers in the response to indicate which origins are allowed to access the resource. The ‘Access-Control-Allow-Origin’ header is one of those headers.

To solve this issue, you can follow these steps:

  • Check server-side configuration: Make sure that the server hosting the requested resource is configured to include the ‘Access-Control-Allow-Origin’ header in its responses. This header should contain either the specific origin that is allowed to access the resource or a wildcard “*” to allow access from any origin.

  • Specify allowed origins: If you have control over the server hosting the resource, you can configure it to include the ‘Access-Control-Allow-Origin’ header and specify the specific origins that are allowed to access the resource. For example, if your client-side code is hosted on “example.com,” the server should include the following header: Access-Control-Allow-Origin: example.com. This allows only requests originating from “example.com” to access the resource.

  • Use wildcard ‘’ cautiously: If you want to allow access from any origin, you can include the wildcard “” in the ‘Access-Control-Allow-Origin’ header. However, be cautious when using this approach, as it allows any website to access your resource, potentially exposing sensitive information.

  • Additional headers: Depending on your application’s needs, you may need to include other CORS-related headers, such as ‘Access-Control-Allow-Methods’ and ‘Access-Control-Allow-Headers’. These headers define the HTTP methods and headers allowed in cross-origin requests.

  • Proxy servers: If your application is making cross-origin requests through a proxy server, ensure that the proxy server is correctly configured to pass the necessary CORS headers from the original server response to the client.