I installed opendistro for elastic search using docker and tried to fetch the information from opendistro kibana portal using react js, but I am getting an error about cors (Access-control-allow-origin):
Access to fetch at 'https://example.com/api/v1/auth/authinfo' from origin 'http://example.com: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.
then added a few lines in elasticsearch.yml file:
opendsitro_security.http.cors.enabled : true
opendsitro_security.http.cors.allow-origin: "*"
opendsitro_security.http.cors.allow-methods: OPTIONS, HEAD, GET, POST, PUT, DELETE
opendsitro_security.http.cors.allow-headers: X-Requested-With,X-Auth-Token,Content-Type,Content-Length
opendsitro_security.http.cors.allow-credentials: true
but still, I am getting the same error. My doubt is there any other way to enable cors in opendsitro for elastic search.
Related
I am trying to setup a Cloud Gateway between React App and NodeJS application
Below is error I am getting on ReactApp:
Access to XMLHttpRequest at 'http://localhost:8080/graphql' from origin 'http://localhost:3000' 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.
I am already tried below link, as much may be with newer version of Cloud Gateway it is not working.
Attempt #1:
spring.cloud.gateway.globalcors.cors-configurations.[/**].allowedOrigins=*
spring.cloud.gateway.globalcors.cors-configurations.[/**].allowedMethods=*
With this I was getting Header issue so I added:
spring.cloud.gateway.globalcors.cors-configurations.[/**].allowedHeaders=*
I am getting below error:
The 'Access-Control-Allow-Origin' header contains multiple values 'http://localhost:3000, *', but only one is allowed.
Attempt #2:
I tried adding the following bean:
#Bean
Function<GatewayFilterSpec, UriSpec> brutalCorsFilters() {
return f -> f
.setResponseHeader("Access-Control-Allow-Origin", "*")
.setResponseHeader("Access-Control-Allow-Methods", "*")
.setResponseHeader("Access-Control-Expose-Headers", "*");
}
But still no luck
Repo: https://github.com/shah-smit/quizroulette-spring-cloud-api-gateway
Please check your configuration carefully, it should be your configuration that caused multiple values, refer to this
The 'Access-Control-Allow-Origin' header contains multiple values
Maybe you can debug your code and find out where 'Access-Control-Allow-Origin' becomes two values.
I am trying to add React-GA to a react web app and have followed the documentation by adding it to index.js:
import ReactGA from 'react-ga';
ReactGA.initialize('MY_ID');
ReactGA.pageview(window.location.pathname + window.location.search);
However, this results in the following error in the browser console
Access to XMLHttpRequest at
'https://www.google-analytics.com/j/collect?......'
from origin 'http://localhost:3000' has been blocked by CORS policy:
The value of the 'Access-Control-Allow-Origin' header in the response
must not be the wildcard '*' when the request's credentials mode is
'include'. The credentials mode of requests initiated by the
XMLHttpRequest is controlled by the withCredentials attribute.
analytics.js:37 POST
https://www.google-analytics.com/j/collect?......
net::ERR_FAILED
Looking at the Google Analytics HTTP response in the network tab, I am definitely seeing the wildcard set for access-control-allow-headers:
access-control-allow-credentials: true
access-control-allow-headers: *
access-control-allow-methods: GET, HEAD, POST, PUT, PATCH, DELETE, OPTIONS
access-control-allow-origin: *
access-control-expose-headers: *
...
However, I am not sure how to resolve this on my end since it appears to be caused by the response from Google.
I think your problem is that you are using a wildcard with a request with the credentials mode 'include'.
The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.
You need to specify the origin for your request to work. here is 'http://localhost:3000'.
You can find more information on this stackoverflow post
I used this code to test Google Analytics with 'create-react-app'.
Here is an example, using the ReactGa inside an userEffect, and initializing it with some userState variable example userId (optional) and marking cookieDomain as auto and enabling debug.
import ReactGa from 'react-ga';
useEffect(()=>{
ReactGa.initialize('Tracking_Id', {
gaOptions: {
userId: username ? username :'Not-Logged'
},
'cookieDomain': 'auto',
'debug': true
});
ReactGa.pageview(window.location.pathname + window.location.search)
console.log(ReactGa.ga())
},[])
You may be able to use the CORS anywhere proxy, by simply just requesting to https://cors-anywhere.herokuapp.com/https://www.google-analytics.com/j/collect?..... instead
Access to fetch at 'http://localhost:8000/api/product/' 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.
I don't have any experience with Django but I know that the error is because you have to enable CORS which will allow you to make api calls to domains other than the source of your call (or on a different port). Check for the documentation to see how to enable CORS.
https://pypi.org/project/django-cors-headers/
This error is being caused by your django backend. Here is what you can do to fix it:
Install django-cors-headers using pip like #seddouguim suggested
Add 'corsheaders' to your installed apps in your django settings.py file
At the bottom of the same settings.py file, you can either add a setting called CORS_ORIGIN_WHITELIST=['localhost:3000'] (or whatever URL you want to add), OR you can set CORS_ORIGIN_ALLOW_ALL = True (good for dev but not for production environments)
Lastly set CORS_ALLOW_HEADERS = ("x-requested-with", "content-type", "accept", "origin", "authorization", "x-csrftoken")
And you should be good to go
Please feel free to let me know if you encounter any other issues
I have flask api(http://127.0.0.1:5000/out/) which return the json. Angular js is http://localhost:4300 also running
I have added the extension Moesif Orign & CORS Changer and switched on also 'Access-Control-Allow-Origin':'*'
Error is below
Access to XMLHttpRequest at 'http://127.0.0.1:5000/out/' from origin 'http://localhost:4300' 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.
Already gone the link Why does my JavaScript code get a "No 'Access-Control-Allow-Origin' header is present on the requested resource" error when Postman does not?
fix with below code
from flask_cors import CORS, cross_origin
cors = CORS(app, resources={r"/api/*": {"origins": "*"}})
#cross_origin(origin='*')
When making Axios GET call to retrieve an image from s3 bucket it creates a preflight check using OPTIONS method. Options method response includes the Access-Controll-Allow-Origin: * header with a wild card but the subsequent GET call fails to retrieve the image.
Browser console out put:
Access to XMLHttpRequest at 'https://example.com' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Response headers from the OPTIONS call:
Response headers from the subsequent GET call:
Axios config for the GET call:
Go to bucket permission and configure cors [https://docs.aws.amazon.com/AmazonS3/latest/userguide/ManageCorsUsing.html][s3 cors documentation]