DEV Community

Carrie
Carrie

Posted on

How to Fix Cross-Origin Request Blocked Error in SafeLine

When managing multiple domains behind SafeLine Web Application Firewall (WAF), you may encounter issues with cross-origin requests. A common browser error looks like this:

"Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource"

This error occurs when a web application running on one domain tries to make a request (e.g., via JavaScript fetch() or XMLHttpRequest) to another domain, but the server does not explicitly allow it via CORS (Cross-Origin Resource Sharing) headers.

Scenario

You have two domains:

  • https://domain-a.com
  • https://domain-b.com (frontend tries to request data from here)

Both domains are configured and protected behind SafeLine. The frontend code on domain-a.com attempts to fetch resources from domain-b.com, but the request is blocked due to CORS policy.

Solution: Use SafeLine's Custom NGINX Config

SafeLine allows you to inject custom NGINX configuration for each application. You can use this feature to manually set the required CORS headers to enable safe cross-origin commun

Step-by-Step Guide

1.Log in to the SafeLine Management Panel
2.Go to Application Management

Navigate to the application receiving the request (in this case, domain-b.com).

3.Edit Custom NGINX Config

Scroll down to find the field for Custom NGINX Config.

4.Paste the Following CORS Headers into the config field:

nginx
   add_header 'Access-Control-Allow-Origin' 'https://domain-a.com' always;
   add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
   add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization' always;
   add_header 'Access-Control-Allow-Credentials' 'true' always;

   # Handle preflight requests
   if ($request_method = 'OPTIONS') {
       add_header 'Access-Control-Max-Age' 86400;
       add_header 'Content-Length' 0;
       add_header 'Content-Type' 'text/plain; charset=UTF-8';
       return 204;
   }
Enter fullscreen mode Exit fullscreen mode

🔒 Note: Replace https://domain-a.com with the actual domain that needs access. You can also use * to allow all origins, but that’s not recommended for sensitive APIs.

5.Save the Changes
After saving, SafeLine will regenerate the config and apply your changes automatically.
6.Test in Browser
Now reload your frontend app and open the browser console. The CORS error should no longer appear, and the request to domain-b.com should succeed.

Tips

  • Make sure the domain specified in Access-Control-Allow-Origin exactly matches the origin making the request.
  • If your API uses authentication (e.g., cookies, tokens), set Access-Control-Allow-Credentials: true and do not use wildcard (*) for Allow-Origin.
  • Check browser developer tools (Network tab) to inspect the request and response headers.

Conclusion

SafeLine doesn’t block cross-origin requests by default — but it also doesn’t inject CORS headers unless you configure them manually. Using the Custom NGINX Config, you can easily allow safe cross-domain interactions for your applications, while maintaining the protection and control SafeLine offers.

If you run into more advanced scenarios (e.g., wildcard subdomain access or dynamic origins), feel free to reach out to the SafeLine community or support team for help.

⸻
SafeLine Website: https://ly.safepoint.cloud/ShZAy9x
Live Demo: https://demo.waf.chaitin.com:9443/statistics
Discord: https://discord.gg/dy3JT7dkmY
Doc: https://docs.waf.chaitin.com/en/home

Top comments (0)