Resolving Magento 2 REST API CORS Issues: A Comprehensive Guide

When developing mobile apps or custom frontends that interact with Magento 2's REST API, many developers encounter frustrating CORS (Cross-Origin Resource Sharing) issues. These problems arise due to how browsers handle cross-origin requests, and without the proper configuration, your requests may be blocked. In this article, we’ll walk through two common CORS issues in Magento 2 and provide solutions to resolve them.

Case 1: Blocked by CORS Policy – Response to Preflight Request Doesn't Pass Access Control Check

One common error developers face is:

blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP OK status.

Solution: Modify .htaccess

To resolve this, you need to ensure that your Apache server is properly handling OPTIONS preflight requests, which are sent by browsers before the actual API request. Follow these steps:

1. Open your .htaccess file located in the root of your Magento installation.

2. Add the following code to allow the server to handle preflight requests and set the appropriate headers:

   
   

RewriteEngine on
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ "index.html" [R=200,E=API:1,PT]

<IfModule mod_headers.c>
    SetEnvIf Accept application/json API
    Header always set Access-Control-Allow-Origin "*" env=API
    Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT" env=API
    Header always set Access-Control-Allow-Headers "Access-Control-Allow-Headers, Origin, Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers, Authorization" env=API
</IfModule>

Explanation:

• The RewriteCond checks for OPTIONS requests (preflight requests).

• The RewriteRule redirects them to "index.html", ensuring they are processed with a 200 OK response.

• The mod_headers module is used to set CORS headers, allowing cross-origin requests from any domain (*) and supporting common HTTP methods like POST, GET, OPTIONS, etc.

Case 2: Error – Multiple Values for 'Access-Control-Allow-Origin' Header

After implementing the previous fix, you might encounter a new error:

The 'Access-Control-Allow-Origin' header contains multiple values '*, *', but only one is allowed.

This error occurs when the Access-Control-Allow-Origin header is being set multiple times, either by Apache or your Magento backend, causing conflicts.

Solution: Unset and Re-set the Header

To resolve this, we need to first unset the conflicting Access-Control-Allow-Origin header and then set it again. Here's how to do it:

1. Open the .htaccess file.

2. Add or modify the following code:

   
   

RewriteEngine on
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ "index.html" [R=200,E=API:1,PT]

<IfModule mod_headers.c>
    SetEnvIf Accept application/json API
    Header unset Access-Control-Allow-Origin
    Header always set Access-Control-Allow-Origin "*" env=API
    Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT" env=API
    Header always set Access-Control-Allow-Headers "Access-Control-Allow-Headers, Origin, Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers, Authorization" env=API
</IfModule>

Explanation:

• Header unset Access-Control-Allow-Origin ensures that any previously set Access-Control-Allow-Origin header is removed.

• Then, we use Header always set Access-Control-Allow-Origin "*" env=API to add the correct header.

By unsetting and resetting the Access-Control-Allow-Origin header, you eliminate the risk of multiple headers being sent, thus preventing the conflict.

Conclusion

Handling CORS issues in Magento 2 can be tricky, but by properly configuring your Apache server with the right .htaccess rules, you can ensure smooth cross-origin requests for your mobile apps and custom frontends.