I use Fetch API (Javascript) in a Chrome Extension to retrieve a .json from my server.
The request can't be submitted due to Chrome CORS - Preflight Error <- Error Screenshot
How can I enable CORS when my client is a Chrome Extension?
You need to request the cross-origin permission for your server's host.
Add your server's host to your manifest.json permissions field:
{
"name": "...",
...
"permissions": [
...,
"https://yourserver.com/"
],
...
}
You can add multiple hosts in permissions field, so you can enable cross-origin permission for all the hosts you need.
Related
When making a http request to "https://example.com/api" - the console throws an error
Refused to connect to...because it violates the following Content Security Policy directive: "connect-src http://localhost:*...
How can I resolve this error?
To make 3rd party API requests in your UI extension you mus specify the endpoints to be allowlisted in your "content_security_policy": { "connect-src": [] }
You can use the Stripe CLI to grant the URL permission:
stripe apps grant url "https://*.api.example.com/path/" "Send data to example service..."
For full reference, see the Stripe Apps docs.
I have an Azure Storage Account (classic) and I enabled CORS through the portal in this way:
Now I have a Flutter Web App (PWA) that needs to get some images from this storage, but it gets CORS errors.
I also tried with a test web page with a simple jquery ajax call and I gets the same errors.
This is the jquery code:
$.ajax({
url: 'https://xxxx.blob.core.windows.net/test.jpg',
type: 'get',
success: function(data, status) {
console.log("Status: "+status+"\nData: "+data);
},
error: function (result) {
console.log(result);
}
});
The error message is:
Access to XMLHttpRequest at 'https://xxxx.blob.core.windows.net/test.jpg' from origin 'https://zzz.azurewebsites.net' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
How can I add the Response Header: access-control-allow-origin: *
Thanks.
As discussed in the chat, your CORS configuration is perfectly fine. The issue you are running into is because the browser had cached the CORS settings. Two things we discovered:
CORS settings max age was set at a very high value (86400 seconds) that would have made the browser cache the CORS settings for a longer duration. Deleting the CORS settings and recreating it with lower max age value along with deleting browser cache will fix that.
It is always helpful to try the AJAX request in a 2nd browser just in case the 1st browser has cached the CORS settings.
I'm unable to get the auth token using
chrome.identity.getAuthToken({interactive: true}, token => {
...
}
I get this error:
Unchecked runtime.lastError: OAuth2 request failed: Connection failed (-2).
I set up an OAuth 2.0 Client for ChromeApp and specified the application id of my extension. Also set up a consent page.
My manifest looks like this:
"permissions": [
"storage",
"identity"
],
"key": "<my application key>",
"oauth2": {
"client_id": "<my client id>.apps.googleusercontent.com",
"scopes": [
"openid", "email", "profile"
]
}
How can I fix or at least debug this issue?
I also had this issue and I noticed that I wasn't using Chrome in the first place, I was using Microsoft Edge.
Make sure you are using Chrome.
I have issues when trying to Post data to my API using ServiceStack's JsonServiceClient.
I get the following error message in the console
Access to fetch at 'https://192.168.10.191:5001/json/reply/CreateEquipment' from origin 'http://192.168.10.191:5000' has been blocked by CORS policy: Request header field headers is not allowed by Access-Control-Allow-Headers in preflight response.
I have added 192.168.10.191:5000 to the Whitelist.
I can see in the network tab that it tries to access "https://192.168.10.191:5001/json/reply/CreateEquipment" but nothing is showing when I capture the traffic using fiddler.
I have attached an image of the headers. https://i.stack.imgur.com/hUfII.png
Your requesting a https resource at port 5001 but your origin white list returns a http resource on 5000, they need to match.
I am developing a chrome extension which requires authentication through a non-google service. It is currently set to unlisted in the Chrome Web Store
The expected flow is as follows:
User opens the extension
Extension check for an authentication code
If the code does not exist, use launchWebAuthFlow to start authentication with the service
User authenticates with the service
Service redirects to the extension with the authentication code
Code is extracted and the user is authenticated
Up to step 4 is working fine, but when redirecting back to the extension, I keep getting a DNS
'appId'.chromiumapp.org’s server DNS address could not be found.
Try running Windows Network Diagnostics.
DNS_PROBE_FINISHED_NXDOMAIN
'appId' is the ID for the chrome extension. My manifest.json contains the permission for the service url:
...
"permissions": [
"*//<service-provider-url>/*"
]
...
The call to the auth flow looks like this:
chrome.identity.launchWebAuthFlow({'url':'<URL for auth>', 'interactive' : true}, function(responseUrl){
// stuff happens here
});
The callback url is registered with the provider and, as far as understand, is being called correctly to return the extension, according to the docs:
This method enables auth flows with non-Google identity providers by
launching a web view and navigating it to the first URL in the
provider's auth flow. When the provider redirects to a URL matching
the pattern https://.chromiumapp.org/*, the window will close,
and the final redirect URL will be passed to the callback function.
Is there something I might be missing during set up?