CORS issue after trying to connect magento.test to frontend vue.js application

[Serwach]

Hello Mark, Hello community

I am trying to connect my very simple vue.js application to your amazing instance of magento. Unfortunetly I see the error:

Can you tell me how to enable CORS in .htaccess file inside nginx container? Please also show me the path to .htaccess which requires changes.

or...

Can you prepare solution, so it does not require manual change after running all the containers?

[dosubot[bot]]

Hello @Serwach 👋,

I'm here to help you with your technical issues and questions. Let's work together to resolve the CORS issue you're experiencing with Magento and your Vue.js application. I'm standing by to assist you!

To address the CORS issue you're experiencing, you need to configure the nginx server to include the necessary CORS headers. The .htaccess file is typically used with Apache, not nginx, so you'll need to modify the nginx configuration instead.

1. Locate the nginx configuration file: In the docker-magento setup, the nginx configuration file is located at images/nginx/1.24/conf/default.magento1.conf ^[1].

2. Modify the nginx configuration: You can add the following CORS headers to the nginx configuration file to allow requests from your Vue.js application:

   location / {
       if ($request_method = 'OPTIONS') {
           add_header 'Access-Control-Allow-Origin' '*';
           add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
           add_header 'Access-Control-Allow-Headers' 'DNT, X-CustomHeader, Keep-Alive, User-Agent, X-Requested-With, If-Modified-Since, Cache-Control, Content-Type';
           add_header 'Access-Control-Max-Age' 1728000;
           add_header 'Content-Type' 'text/plain charset=UTF-8';
           add_header 'Content-Length' 0;
           return 204;
       }
   
       add_header 'Access-Control-Allow-Origin' '*';
       add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
       add_header 'Access-Control-Allow-Headers' 'DNT, X-CustomHeader, Keep-Alive, User-Agent, X-Requested-With, If-Modified-Since, Cache-Control, Content-Type';
   }
   

3. Persist changes: To ensure these changes persist across container restarts, you can create a custom Docker image or use a volume to mount your modified configuration file into the nginx container.

By following these steps, you should be able to resolve the CORS issue without needing to manually change the configuration after each container restart.

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Bug Report | Other}

[dosubot[bot]]

When using the one-line setup command, the nginx configuration file is not directly placed in your Magento directory. Instead, it is part of the Docker image used in the setup. The nginx configuration file is located within the repository at images/nginx/1.24/conf/default.conf ^[1].

To modify the nginx configuration, you can follow these steps:

1. Create a Custom Configuration: Create a new file on your local machine with the necessary CORS headers, as mentioned in the previous response.

2. Mount the Configuration: Use Docker's volume feature to mount your custom configuration file into the nginx container. You can do this by modifying the docker-compose setup to include a volume that maps your local configuration file to the appropriate location inside the container.

3. Rebuild and Restart: After setting up the volume, rebuild and restart your Docker containers to apply the changes.

This approach allows you to customize the nginx configuration without directly accessing the files within the Docker image.

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Bug Report | Other}

[dosubot[bot]]

To locate the nginx configuration file within the nginx container, you should look for it at the path /etc/nginx/nginx.conf. This is the main configuration file for nginx, and additional configurations can be included from /etc/nginx/conf.d/*.conf ^[1][2].

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Bug Report | Other}

[markshust]

@Serwach I see @dosubot gave some good recommendations, I'd recommend going through the suggestions and see if that works.

A lesson about how to customize Nginx is available at https://courses.m.academy/courses/487758/lectures/9064349 which could be useful in this scenario.

Since this isn't an issue with this project, but an implementation detail, and there are recommendations to follow to resolve, I'll close this one out.

[dosubot[bot]]

Hey @markshust! It looks like you're diving into some project management here. I'm just a bot designed to help with technical questions, bugs, and engineering knowledge. If you think I should have more to say on this, feel free to reach out to the Dosu Team. Thanks for understanding! 😊

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Bug Report | Other}

[Serwach]

Finally I fixed it. If you have the same issue and working on localhost just run your browser with the flag called disable-web-security like this:

google-chrome --disable-web-security --user-data-dir=/tmp/chrome-cors

[markshust]

Thanks so much @Serwach. Do we need to bring in a PR to resolve this?

[dosubot[bot]]

Hi, @Serwach. I'm Dosu, and I'm helping the docker-magento team manage their backlog and am marking this issue as stale.

Issue Summary:

• You reported a CORS error when connecting a Vue.js frontend to Magento and asked about enabling CORS via .htaccess inside the nginx container.
• It was clarified that nginx uses configuration files (default.conf) rather than .htaccess, and CORS headers should be added there.
• The recommended approach is to mount a custom nginx config via Docker volumes to persist changes.
• The maintainer acknowledged this and closed the issue as it relates to implementation details.
• You shared a local workaround by disabling web security in the browser.

Next Steps:

• Please let me know if this issue is still relevant with the latest docker-magento version by commenting here to keep the discussion open.
• Otherwise, this issue will be automatically closed in 30 days.

Thanks for your understanding and contribution!

[markshust]

@dosu can you make a PR for adding the proposed fix to the readme?

[react-motionbrian]

Note this answer https://franklin-jqvmap.github.io/ScUIVAScGTCE_BqhiBs/