I am trying to run thinkcmf framework backend with vue front end.
I get the bellow error.
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://domainname.com:80/api/. (Reason: CORS request did not succeed). Status code: (null).
can anyone help with this?
Related
I use wavesurfer.js
If I put an internal link such as "./assets/audio/example.mp3" the wave is generated successful but if I put an external link such as "https://www.w3schools.com/html/horse.ogg" I have the bellow error:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://www.w3schools.com/html/horse.ogg. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200.
I feel like it must have something to do with the xhr settings but I don't know anything about that.
In the wavesurfer.js website, there is no complete explanation about this, unfortunately
My UI page keeps on loading when I try to perform a click operation. Which in return needs to fetch data using API call in the back end and display it in UI. Attached screenshot for reference.
Access to XMLHttpRequest at 'https://idp2.renault.com/nidp//app/login?target=https%3A%2F%2Fidp2.renault.com%2Fnidp%2Foauth%2Fnam%2Fauthz%3Fresponse_type%3Dcode%26scope%3Dopenid%2Bemail%2Bopenid%2Barca%2Brole-eic-irn65553%26client_id%3Da6a57638-bb90-49b8-b11b-862c9824fa13%26state%3DhGLwfzSpJOUeEw1dk5GOnFfN5L8%26redirect_uri%3Dhttps%3A%2F%2Feic-app2.dev1.applis.renault.fr%3A443%2Fauth%2Foidc%26nonce%3DFiGw4mp9izHujzUrQVgEA7q9SOwUETofvF-5kDVqZqg%26resourceServer%3DIdentityProvider' (redirected from 'https://eic-app2.dev1.applis.renault.fr/assets/i18n/fr.json') from origin 'https://eic-app2.dev1.applis.renault.fr' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource
I had the very same issue with the same error message. My symfony php backend is running locally in docker. XDebug is also installed. Following 2 lines in the backend resolved this issue and I was finally able to login.
touch /var/www/html/xdebug.log
chmod 777 /var/www/html/xdebug.log
I have an API instance in AZURE where the configurations are as below.
API endpoint : corol.abpparking.domain.com
API suffix : myaboutpage
Backend Webservice URL : http://10.20.10.2:8080/api/v1/
What works
If i call the webservice URL directly as below for the operation GET to /about, i get response code 200
http://10.20.10.2:8080/api/v1/about
Response: 200
What does not work
If i perform the same operation via APIM, i get a 404 resource not found.
http://corol.abpparking.domain.com/myaboutpage/about
Response: 404 Resource not found
I could not figure our what could be the reason. Note that i do not have any basepath in the Swagger definition.
Make sure to check that your API in Azure APIM is configured to accept HTTP in addition to HTTPS. You can set this in API settings, on the same page where you set API backend URL
Ok, I hope I am not making a duplicate but my question is a bit different from most of the result for CORS questions.
I have springboot rest api backend and I have reactJs frontend using Axios.
on my API interface I added
#CrossOrigin(origins = {"http://localhost:3000", "http://localhost"})
#RequestMapping ...
...
Locally everything is running fine.
React running on http://localhost:3000
api running on http://localhost:8080/apixxx/orders
So I deployed them on my ubuntu server:
React running on http://12.123.12.123 (port is 80)
api running on http://12.123.12.123:8080 (postman requests are successful)
Now see, I put #CrossOrigin origin of "http://localhost" because that is for the deployed copy of my API, since relative to the server it is localhost.
Now I am getting:
Access to XMLHttpRequest at 'http://localhost:8080/apireq/v1/apiresourcexx' from origin 'http://12.123.12.123' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
this is the same error I get locally when I remove the #CrossOrigin.
I tried adding in the origins "http://12.123.12.123", "http://12.123.12.123:80", "http://myDomainName.com" (my domain name), "http://myDomainName.com:80".
Nothing works. Still the same error.
What I found works is:
#CrossOrigin(origins = {"*"})
But I dont want to do that....
Please help.
-----UPDATE-----
Ok, I am really confused now.
Apparently, I just realized that the axios routing I used is axios.post('http://localhost:8080/apixxx/orders', ...); And basically this will point to the springboot running on my local machine, not on the prod server. If that is the case, then each of my client will be different origin and all of them will be calling my API... If that is the case then the only solution is that one I am avoiding: #CrossOrigin(origins ="*")
Please advise. What do you guys usually do in this situaion.
I am trying to send a GET request from my frontend to an API application. Both are running on my local machine. This is how it's built right now:
backend <===> frontend <=x=> API application
All three parts are running independently from each other in their own docker container and are only communicating with each other via HTTP-requests.
As shown in the top image, the connection between backend and frontend works fine, but between frontend and API application does not.
The stack consists of:
frontend: Node server with vue-js and for requests I use axios
API application: Scala with Play Framework 2.5.14
The API application itself works just find when I send a request to her via curl like this:
curl -X GET api-application.docker/api/user?userId=1 \
-H "Authorization: key" -H "Accept: Application/Json"
But when I call it from frontend, I get a 404 on the OPTIONS call. It also gives me a warning in Firefox related to CORS header Access-Control-Allow-Origin:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the
remote resource at http://api-application.docker:9000/api/user?userId=1
(Reason: CORS header ‘Access-Control-Allow-Origin’ missing).
Therefore I first went into the api application's application.conf and added
play.filters.cors {
allowedOrigins = ["*"]
}
I also tried to exchange the asterisk for http://frontend.docker:8080
This didn't work, so I deleted that entry again and added this line instead:
play.filters.disabled += "play.filters.cors.CORSFilter"
Still no change at all. Now I am wondering if I misunderstood the connection between OPTIONS and CORS? Or did I turn it off wrong? Can anyone help me out?
EDIT:
More stuff I tried while waiting for answers, all without success:
I changed the entry in application.conf to:
play.filters.cors {
allowedOrigins = null
}
404 on OPTIONS request indicates your CORSFilter is not enabled. Since you are using Play 2.5 you can enable it by adding
libraryDependencies += filters
to your build.sbt, and by creating the following app/Filters.scala file:
import javax.inject.Inject
import play.api.http.DefaultHttpFilters
import play.filters.cors.CORSFilter
class Filters #Inject() (corsFilter: CORSFilter)
extends DefaultHttpFilters(corsFilter)
By default everything is allowed so there is no need to modify application.conf until you decide to start locking down access. You should NOT add play.filters.disabled += "play.filters.cors.CORSFilter" as this disables CORS support.
The reason why your curl request works fine is because non-browser HTTP clients do not enforce Same-origin policy (see related SO answer), thus CORS does not apply in the case of curl.
404 on OPTIONS request means that the following route is not found:
OPTIONS api-application.docker/api/user
The browser automatically sends this preflight request before sending the corresponding GET request. This OPTIONS route will be automatically taken care of by Play's CORS support once enabled.