I have tried manually using https://maps.googleapis.com/maps/api/place/autocomplete/json
?input=hyderabad&key=YOUR_API_KEY api but when I deploy app to server, CORS issue occurs.
CORS Error :
Access to XMLHttpRequest at 'https://maps.googleapis.com/maps/api/place/autocomplete/json?input=duragm+cheruvu&key=YOUR-API' from origin 'https://somedomain.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
How to get rid of this CORS error after deployment? Or can we have any flutter web package?
Related
When executing a query through javascript I get a CORS error:
Access to fetch at 'http://access.mainnet.nodes.onflow.org:9000/v1/scripts?block_height=sealed' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
This error happens when querying from testnet and mainnet.
Also happens from localhost or from a site running in Vercel.
The rpcs I tried:
https://access-testnet.onflow.org/
http://access.devnet.nodes.onflow.org:9000/
http://flow-testnet.g.alchemy.com:443/
(also tried their mainnet counterparts)
Solved the problem using these rpcs:
https://rest-testnet.onflow.org/
https://rest-mainnet.onflow.org/
I have a webapp deployed and it's visitable via the domain url www.myapp.com.
Also I have a backend deployed that is called by a middleware calls via nuxt.config.js and serverMiddleware.
serverMiddleware: [
{ path: '/backend', handler: '~/api/backend.js' }
]
When deployed and using Axios out of the box the calls to the backend/middleware are done by http://localhost:3000 instead of www.myapp.com. Therefore CORS is being triggered and giving me this error in the console:
Access to XMLHttpRequest at 'http://localhost:3000/backend/packingplan/all?owner=123' from origin 'https://www.myapp.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
So I did a little research and found out that I can override the base URL Axios uses. That way I can turn the http://localhost:3000 into www.myapp.com and avoid the CORS problem.
I am doing this like this:
create a Nuxt plugin ~/plugins/axios.js
add the following code
export default function (context) {
context.$axios.defaults.timeout = 15000
context.$axios.defaults.baseURL = context.$config.baseUrl || 'http://axios.plugin.failed'
}
add the plugin to the nuxt.config.js
plugins: [
'~/plugins/axios.js'
]
And this works. Now the CORS problem is solved.
BUT
It just works when I call my app with www.myapp.com. As soon as I open my webapp without the www then CORS is triggered again.
Access to XMLHttpRequest at 'https://www.myapp.com/backend/packingplan/all?owner=62443cb7d0f6b2006a8526e5' from origin 'https://myapp.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
So I wonder if I can tell Axios somehow to use the URL that is defined in the browser? If the user is visiting the site via www.myapp.com it should use that as Base URL for Axios and if the user is visiting the site via myapp.com it should use that one?
How can I achieve that? Any ideas?
I'm building an extension and am having trouble with the workItemIcons api endpoint only on azure devops server, it works fine for azure devops services. The end point I'm hitting is http://...../DefaultCollection/_apis/wit/workItemIcons. I'm getting the following error when running the extension locally, but get the same kind of error even on the published version.
Access to fetch at 'http://...../DefaultCollection/_apis/wit/workItemIcons' from origin 'http://localhost:5500' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
Extension scopes I think are fine
"vso.graph",
"vso.identity",
"vso.project",
"vso.profile",
"vso.work_full",
"vso.analytics",
"vso.work"
],```
We're using the `azure-devops-extension-api` package.
You can try the following ways:
Add the Access-Control-Allow-Origin header to your response.
For example:
res.setHeader('Access-Control-Allow-Origin', '*');
Bypass the CORS secure mechanism via setting mode as no-cors.
For example:
fetch('http://...../DefaultCollection/_apis/wit/workItemIcons', { mode: 'no-cors' });
To view more details, you can reference to the articles below:
CORS: Cross-Origin Resource Sharing
No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST API
I have an error using Ionic v1 when I make a POST call. GET and PUT calls works, but only POST calls don't work, the error is this:
XMLHttpRequest cannot load http://localhost:8080/FoodDrinkDispener/rest/user. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access. The response had HTTP status code 403.
I tryed this POST request in "Postman" and it works very well. I don't know what is the problem is a mistery. I found something in internet but I read that there are some things to change in some configuration files not present in my project (maybe for the Ionic version)
Solved using "Moesif Origin & CORS Changer" Google Chrome Estension.
I keep getting the following CORS error when trying to consume the JIRA ReST API:
Fetch API cannot load
https://jira.our-domain-name.com/jira/rest/api/2/search?jql=project=tcc%20and%20cf[10809]~8423362.
Response to preflight request doesn't pass access control check: No
'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'https://application-url.our-domain-name.com' is therefore not allowed
access. If an opaque response serves your needs, set the request's
mode to 'no-cors' to fetch the resource with CORS disabled.
However, this search URL works 100% when I paste it directly into the browser, or running it through Postman, or using CURL from command line.
My app is calling the API, using the javascript fetch API. I set the following headers when making the GET request:
headers: {
"content-type": "application/json",
"authorization": "Basic <<encrypted>>"
}
I have ensured that the requesting host has been whitelised in JIRA admin - I have tested the host using the test feature on the whitelist page.
When I change the whitelist from wildcard to Domain Name, I suddenly get this:
Fetch API cannot load
https://jira.our-domain-name.com/jira/rest/api/2/search?jql=project=tcc%20and%20cf[10809]~8423362.
Request header field authorization is not allowed by
Access-Control-Allow-Headers in preflight response.
Any ideas?
You have 2 options.
The easiest way is to proxy your request through your backend (if that's possible) since the CORS restrictions are enforced on JavaScript running within the browser.
The other way would be to reconfigure the Tomcat server that Jira is running on to support sending a CORS header. This can have other security implications if not done right.