How to Solve 'Redirect Has Been Blocked by Cors Policy: No 'Access-Control-Allow-Origin' Header'

How to solve 'Redirect has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header'?

In addition to what awd mentioned about getting the person responsible for the server to reconfigure (an impractical solution for local development) I use a change-origin chrome plugin like this:

Moesif Orign & CORS Changer

You can make your local dev server (ex: localhost:8080) to appear to be coming from 172.16.1.157:8002 or any other domain.

how to fix 'Access to XMLHttpRequest has been blocked by CORS policy' Redirect is not allowed for a preflight request only one route

Permanent solution from server side:

The best and secure solution is to allow access control from server end. For laravel you can follow the following steps:

In App\Http\Middleware\Cors.php:

public function handle($request, Closure $next)
{
    return $next($request)->header('Access-Control-Allow-Origin', '*')
        ->header('Access-Control-Allow-Methods','GET', 'POST', 'PUT', 'PATCH', 'DELETE', 'OPTIONS');
}

In App\Http\Kernel.php:

protected $middleware = [
    ...
    \App\Http\Middleware\Cors::class,
];

Temporary solution from browser side:

If you want to disable CORS from browser-end then follow one of the following steps:

Safari: Enable the develop menu from Preferences > Advanced. Then select “Disable Cross-Origin Restrictions” from the develop menu.

Chrome (Extension): Use the Chrome extension Allow CORS: Access-Control-Allow-Origin

Chrome (CMD): Close all your Chrome browser and services. Then run the following command:

Windows:

“C:\Program Files (x86)\Google\Chrome\Application\chrome.exe” –-allow-file-access-from-files --disable-web-security --user-data-dir --disable-features=CrossSiteDocumentBlockingIfIsolating

Mac:

open -n -a /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome — args — user-data-dir=”/tmp/chrome_dev_test” — disable-web-security

Access-Control-Allow-Origin equals origin but the browser still denies access... why?

Problem

The error message—I'm using dummy URLs and origins below—from the browser can be a bit confusing:

Access to XMLHttpRequest at 'https://api.example.com/' (redirected from 'https://media.example.com/') from origin 'https://example.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header has a value 'https://example.com' that is not equal to the supplied origin.

The key here is that, as sideshowbarker hinted at in his comment, because your first preflighted request to https://media.example.com/ responds with a cross-origin redirect to https://api.example.com/, the browser performs another whole CORS access-control check for that resource. However, because the redirect resulting from the first preflighted request happens to be cross-origin, the browser sets the origin of the second preflight request (which the error message refers to as the "supplied origin"), not as https://example.com, but as the null origin!

Here's a rundown of what is likely happening:

Because https://api.example.com likely doesn't (and shouldn't!) allow the null, the second access-control check fails and you get that annoying CORS error.

Solution

Resist the temptation to allow the null origin on https://api.example.com/, as doing so has serious security ramifications: it amount to voiding the protection that the Same-Origin Policy provides.

Instead, you should get rid of that redirect from https://media.example.com/ to https://api.example.com/ and make your frontend request the https://api.example.com/ resource directly.

Alternatively, if you cannot completely get rid of the redirect but you can change its destination, make it a same-origin redirect (from somewhere https://media.example.org to elsewhere on https://media.example.org).

Redirect has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header

I was able to bypass this issue by passing the redirect url to a form action and triggering the submit using Javascript instead of directly redirecting to the url. CORS check is not done when the request comes from a form submit.

has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource in Javascript

If you are using token based authentication and would like to pass a token via HTTP header. Here is sample code in JRS 7.8.0:

visualize({
    auth: {
        token: token,
        preAuth: true,
        tokenName: "pp",
    loginFn: function(properties, request) {
        return request({
            url: url,
            type: "get",
            headers: {
                pp: properties.token,
                Accept: "application/json"
                    }
            });
        }
    }

}

The method will fail with an error

Access to XMLHttpRequest at 'https://myCustomApp/jasperserver-pro/' from origin 'https://localhost' has been blocked by CORS policy: Request header field pp is not allowed by Access-Control-Allow-Headers in preflight response.

Since jasperserver 7.8.0 all the CORS policy are pre-defined in the WEB-INF/applicationContext-security-pro-web.xml as given below :

<property name="allowedHeaders">
                                <list>
                                    <value>Cache-Control</value>
                                    <value>X-Suppress-Basic</value>
                                    <value>Origin</value>
                                    <value>Accept</value>
                                    <value>X-Requested-With</value>
                                    <value>Content-Type</value>
                                    <value>Pragma</value>
                                    <value>accept-timezone</value>
                                    <value>withCredentials</value>
                                    <value>X-Remote-Domain</value>
                                    <value>X-Is-Visualize</value>
                                    <value>x-jrs-base-url</value>
                                    <value>Content-Disposition</value>
                                    <value>Content-Description</value>
                                </list>
                            </property>

To resolve the error you need to add your principalParameter name in above allowedHeaders list as PP. save the changes and restart the server.

---

Related Topics