Angular2 in nginx - CORS header 'Access-Control-Allow-Origin' missing - nginx

So I have taken the heroes tutorial from Angular 2, used it with an angular-cli project. Running ng serve and using in memory api, it works.
Changed the server url to point to my tomcat server that is providing a rest api. I have tested this with curl and it gives back data.
I then built it for production and put the resulting bundles into nginx on the same machine as tomcat.
Run in Firefox, get correct page but no data. Console shows the GET is OK. But I do get
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://centos7:8080/heroes/heroes. (Reason: CORS header 'Access-Control-Allow-Origin' missing).
Other questions in StackOverFlow on this topic say that both must be in the same domain, which they are, the tomcat server is centos7:8080/heroes/heroes and the nginx server is centos7/
Should I have to open up CORS? I have seen http://enable-cors.org/server_nginx.html so I need to add this in nginx.conf?
Does anyone have any ideas?
Regards

So I am not if this is the abolute answer but it removed the CORS error in browser console.
In my grails 3 rest api application, I added the grails 3 COR interceptor https://github.com/appcela/grails3-cors-interceptor.
I now get a different problem but I will raise that in a separate question.

Related

blazor client application Cross-Origin Request Blocked: openid-configuration error

Dotnet core 3.1 blazorwasm template app is giving the below error while accessing from network or after hosting it on a linux server. It seems the published app is always looking for local host ip for redirection at certain places.
the errors appeared on the firefox console is given bellow
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1:5000/.well-known/openid-configuration. (Reason: CORS request did not succeed).
how to configure and publish it to avoid routing to localhost.
This can be reproduced by simply taking the code
https://github.com/dotnet-presentations/blazor-workshop
after running it from visual studio try to access it from a remote client (another machine) will give error while navigating from login and registration links.
Try adding the following CORS middleware configuration to the web API's service's Startup.Configure method and see if that works:
app.UseCors(policy => policy.WithOrigins("http://localhost:5000", "https://localhost:5001")
.AllowAnyMethod()
.WithHeaders(HeaderNames.ContentType));
You need to add this to this file if you are using the code mentioned in your question.
Doc and sample project can be found here.

Swagger UI - TypeError: Failed to fetch - on endpoint request (ASPNET Core API)

When trying to run a request through swagger UI, I receive the following response on Swagger
TypeError: Failed to fetch
After searching around, I found that a possible cause of this error is because of a CORS issue, where the origin is changed in the request (as you can see at this other post here). However, in my case, this is not running through some other proxy, it is hosted on a locally hosted server and that server is not changing any of the headers. I realized this when I tried to allow the API to just accept any CORS headers to test if this was the issue; sadly it was not and the issue persisted.
The API is running on IIS hosted on a server that is hosted locally. The API is running as an application on the default website and is accessed via the following url:
http://servername/application-name/swagger/index.html
Can anyone help with this issue?
After further investigation, I found that when I looked at the requests being sent to the server through the dev tools on the browser, that the URL was being changed from http to https on the request of the endpoint through swagger.
HTTPS, has not been set up on the server and returns a 404 (as seen in the dev tools).
It turns out, that even though the server has not been setup to serve content via HTTPS, the requests where still redirected to HTTPS and this was the reason
app.UseHttpsRedirection();
So, even though swagger was able to be loaded on HTTP, when the request was made to the API, the API responded with a 307 - for redirection and the request was redirected to HTTPS - which in turn returned 404. This 404 response was the cause the TypeError: Failed to fetch
The recommended fix for this is to turn off https redirection (ONLY FOR TESTING PURPOSES) and the other is to enable the server to serve the content correctly over HTTPS, so that when a call is made, it is not redirected, but rather sent straight to the correct API address on HTTPS - which should not return the data correctly, since the server can serve HTTPS content

Cross domain (CORS) error in asp.net / Angular server

I am working on Angular 1 / ASP.net tech stack based web application.
For some reason, I can not deploy api server on my local env, using Production server. And I launched UI side with nginx in local env.
Login page is:
http://localhost:8080/login.html
And when click login button, it calls API from production server.
http://devprod2.com/api/oauth/login
But I am getting error:
Response for preflight has invalid HTTP status code 400
I opened Cross domain option in browser, with chrome CORS extension.
But it seems this error is related with some CORS problem.
Would you like to help me to fix this problem?
A preflight request occurs when you use certain methods, e.g. POST
It is a request that automatically happens before the cross domain POST happens.
It is checking to see that the correct CORS headers are in place on the server before making the POST request.
It seems like your preflight OPTIONS request is giving an invalid response. On your server, make sure you return 200 for all OPTIONS requests and make sure the CORS headers are in place on the server for all requests.
I believe Angular 1 also has options for a POST request that will prevent preflight requests from being made but you would have to investigate this further yourself.
Alternatively, depending on your setup, it maybe possible to rewrite the request to avoid CORS which is only enforced by browsers.

Wordpress Ninja Forms, Access-Control-Allow-Origin and admin-ajax.php

So, I have this WP installed on Heroku and I've installed Ninja forms to it. Despite everything working OK locally, when I push it to Heroku, the form is not submited and I receive this error through the Chrome's Console:
Failed to load https://ratts.com.br/wp-admin/admin-ajax.php: No
'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'http://ratts.com.br' is therefore not allowed
access. The response had HTTP status code 503.
It's worthy to mention that this error is only delivered when I access the page via http, but when I access the page trough https the form works just fine, due to what I think to be a CORS problem. Anyone has any idea about how can I solve this issue? It have been three days of unsuccessful research already... rsrs
I believe that http to https for the same domain is still considered CORS. You need to make sure all traffic is redirected from http to https. Take a look at this thread.

how to use CORS mechanism in native client

For example,I hava a pnacl myapp.pexe , And my website is www.A.com. and myapp.pexe and www.A.com are on the same server. However, the website www.B.com need to access the myapp.pexe. And i got a error, Native Client: access to manifest url was denied.
Using CORS can slove this problem? If using CORS can slove this problem, how to do ?
This answer is not Native Client specific. Accessing Native Client resources from another origin uses the standard CORS mechanism.
To answer your question, though:
This can be done by setting up the correct CORS response headers on the A.com server. There are many online resources that can describe how to do this: take a look at http://www.html5rocks.com/en/tutorials/cors/ for example.
For the simplest case, the solution is to return one additional header in the GET response for myapp.pexe and myapp.nmf:
Access-Control-Allow-Origin: http://A.com
There are more headers that are required for other request method types, content types, sending credentials, etc.

Resources