What is the "Access-Control-Allow-Origin - Unblock" add-on and how can I use it?

The "Access-Control-Allow-Origin - Unblock" is a browser extension for developers to bypass CORS errors when the (development) server does not explicitly authorize them. By default, if the response to a request does not have the "Access-Control-Allow-Origin" header, the browser will not permit the use of the "XMLHttpRequest" or "fetch" method to access the resource content. When this extension is enabled, it will add the header "Access-Control-Allow-Origin = *" to every network request, allowing you to use these methods without encountering any errors. Without this header, you will receive the following error message:

Access to XMLHttpRequest at *** from origin *** has been blocked by CORS policy: Method *** is not allowed by Access-Control-Allow-Methods in preflight response.

This extension is disabled by default and should only be used while developing your code. I do not recommend to keep the extension enabled all the time, as it affects all network requests and appends the above headers to them. These headers let the browser allow scripts to access resources without explicit permission. When the extension is disabled, it does not observe network activities and does not consume any resources.

What's new in this version?

Please check the Logs section.

What does occur when a net request already has the headers "Access-Control-Allow-Origin" or "Access-Control-Allow-Methods" headers?

It depends on your settings. By default, the extension replaces these headers with the default values. However, you can preserve the original values through the right-click context menu by disabling the overwriting feature when these headers exist. You can choose to disable the overwriting feature for each header individually.

How can I determine if the extension is active (is overwriting headers)?

When the extension is active, the action button changes its color from gray to orange, and the status is displayed in the tooltip area if you place your mouse over it.

I prefer to have this extension constantly active, but it interferes with certain websites, such as "aliexpress.com". Is there a way to restrict its usage to specific hostnames?

[Before 0.5.0 release] The extension currently does not have this capability. On Chromium browsers, you can restrict the extension's access to specific hostnames by right-clicking on the action button and selecting the "This can Read and Change Site Data" option. Now limit its access to the necessary hostnames.

[After 0.5.0 release] The extension now works per tab. Simply enable it for a single tab and load the site inside this tab.

If you need to unblock CPS (content-security-policy) and have control on all the related headers use:

• Chrome: https://chromewebstore.google.com/detail/csp-unblock/lkbelpgpclajeekijigjffllhigbhobd
• Edge: https://microsoftedge.microsoft.com/addons/detail/ddjfnijclkbmemjealgjknemhhljclbo

Can the extension emulate successful support for the preflight response if my test server does not support the "OPTIONS" method and my browser returns a "405 (Method Not Allowed)" status code?

The extension, starting from version 0.3.5, can change the response status codes when an error happens (status codes in the 4xx range), utilizing the debugger protocol. You can turn the feature on and off per browser tab. To activate it, right-click the action button, go to the "Extra Options" menu, and enable the overwrite. Later you can turn it off by closing the debugger banner or pressing the disable button. Since the debugger API controls the overwrites, you need to manually enable it for each tab.

How can I test if the extension works or not?

Go to the webbrowsertools.com/test-cors web page. First, disable the extension (when the action button is gray). Try the tests. Now enable the extension and run the test once again.

What is the purpose of the "Append Headers to Allow Shared Array Buffer" option and how does it work?

The "Append Headers to Allow Shared Array Buffer" option enables access to the "SharedArrayBuffer" object even on localhost development. This option appends the necessary headers to let the browser permit the "SharedArrayBuffer" class on the page. To achieve this, the extension adds "Cross-Origin-Opener-Policy = same-origin" and "Cross-Origin-Embedder-Policy = require-corp" headers to the top, and all script requests. These headers cause the browser to permit access to the "SharedArrayBuffer" class. However, one drawback is that the browser will not allow remote resources on the page. The extension also adds "Cross-Origin-Resource-Policy = cross-origin" to all requests to address this issue. By default, this option is disabled. If you need this object during development, you can enable it from the action button's context menu. Here is the meaning of the altered headers:

• "Cross-Origin-Opener-Policy" (COOP) header: This header indicates the security policy for a document's "opener" browsing context. The value "same-origin" means that the document can only be navigated by or opened by the same origin documents.
• "Cross-Origin-Embedder-Policy" (COEP) header: This header indicates the security policy for a document's "embedder" browsing context. The value "require-corp" forces the same origin embed requests.
• "Cross-Origin-Resource-Policy" (CORP) header: This header indicates the security policy for a resource loaded by a document. The value "cross-origin" allows resources from any origin.