I am trying to serve a build on my network with 2 ports.
1 for frontend which is localhost:3000 and 1 for server with localhost:3001
I currently have the build for my frontend, but the problem here is i wanted to access the localhost:3001
On localhost:3001 which is for development and not for deployment
. As you can see in the image, I can communicate with localhost:3001
But when i try the **BUILD FRONTEND WITH 192.168.254.100:300 ** It can't find my server (port 3001)
EDIT
I'm successful on solving the first problem. But, another problem is i can't access the site on using a mobile phone without cors extension from chrome. And as well as the COOKIES ARE NOT SETTING in order to be authenticated.
This problems occurs due to the CORS policy. Basically, when you send a request from a URL that is different from your server URL, you'll be blocked. For example, if you communicate to your server using its own URL (localhost:3001), it works fine. However, if you do that from your frontend URL, CORS policy will block that. Therefore, in your server, you have to add Access-Control-Allow-Origin in your HTTP response. In Express, you can add the cors middleware.
First, go to your server folder and install cors:
npm i cors
In your entry point file of your server (server.js, index.js, or whatever), insert this line:
app.use(cors()); //This allow any websites to communicate to your server
If you want to only allow your frontend url to communicate and not others:
app.use(cors({ origin: "http://192.164.254.100:3000" })
app is of course from:
const app = express()
Restart the server and it should works fine.
Related
I Have a simple back-end app on a Google cloud virtual machine. It receives websocket connections and sends some simple messages to clients. I also have nginx server running on same machine, listening to 443 port and redirecting requests to my application (http://127.0.0.1:8080). Everything is secured by a valid SSL certificate, so requests are made through https:// and wss://.
Now I'm writing Angular front-end application that connects to my server like this:
return webSocket({
url: `wss://www.mydomain.site/${path}`,
closeObserver: {
next: (event: CloseEvent) => { console.log(event) }
}
}).multiplex(() => {}, () => {}, () => true)
When I try to run the code in my browser with AdBlock chrome extension enabled, it thinks that my request to websocket is an ad and blocks it. So my server doesn't even receive Upgrade request and browser logs WebSocket connection to 'wss://mydomain.site/something' failed.
When AdBlock is disabled, everything works fine: Request is sent to my server and incoming messages are received on the browser.
Also, when I try sending request directly to my app and bypassing nginx proxy like this: ws://www.mydomain.site:8080/something, everything works fine with AdBlock enabled.
My website doesn't use ads, so I don't care if users have AdBlock on or off, and asking users to disable AdBlock might be annoying for them and bad for UX.
My question is, what can I do to prevent AdBlock from treating my wss:// request as an ad and blocking it?
My domain is .site, can that be causing this issue ?
Same issue, I was previously using no-ip.com to redirect the websocket using certbot TLS system with domain name, but no-ip was requesting an update every month which is really tedious work for a 8$/mo server hosted on google cloud.
I started using duckdns which doesn't require every month update, and when I investigated for 5 hours why it couldn't connect, it was adblock which doesn't like duckdns.com it seems ...
You can use no-ip if you are not afraid to click "update" every month, or find another service which isn't blocked by adblock :)
Access to audio at 'https://.amazonaws.com/.mp3' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource
We have a vue.js frontend and spring boot backend.
There a tag in a vue.js file which gets the src link by calling spring boot backend server. The backend returns the src link.
As you can see the below is the run time audio component
<audio data-v-3f267e7a="" src="https://****.amazonaws.com/****.mp3" eq-attached="true"></audio>
I am confused as why the browser is throwing CORS error in this case. Please let me know why the error in the first place and how to solve this. CORS is already enabled in spring security file. I already tried with #CrossOrigin annotations in spring controller.
Since your error is CORS, between your vue.js and amazon audio url, spring boot is not related to that.
Commonly CORS said us: No web application can download my resources using javascript.
In your case, amazon is telling you: Your web at localhost cannot download my audios.
If you would be the owner of amazon, and you want any website to be able to download your audios, you just need to add this response header in the audio url:
Access-Control-Allow-Origin : *
How fix it?
Try to use a minimal ajax invocation to dowload the audio url. With this you can verify if url is "downloadable" or has the classic cors headers. Don't forget to test it with a kind of server like one of these
If you can't download it or you get the same cors error as your vue app, you could verify that amazon does not allow this type of usage of audio urls.
Also verify if amazon has a kind of administration web console which allows us the registration of origins. In this case you must add the localhost:8080 or any domain in which your web app is running.
Workaround
If the url is downloadable at backend side, I mean with java and not with javascript, you could create a simple spring controller which will download the audio and return maybe the bytes or another format that your vue app needs. At this point you are the owner, so you could add any CORS header you need.
I have a SPA running on my localhost:3000 and my ASP.NET Core 3.1 Web API running on localhost:44372.
I'm trying to debug the SPA from my connected Android Device. I connected the device, did port forwarding, everything is well, SPA gets opened, but then it does a request to Web API and receives CORS error. When I check network tab I see that the origin is https://localhost:3000, which is correct. Does chrome remote debugging mode somehow replace the origin, because everything works well if I open the SPA locally?
I tried to debug Web API project with custom middleware, but I'm unable to hit the breaking point: seems like it returns CORS error before pipeline even started.
Here are my CORS configs in Web API:
builder.UseCors(x => x
.WithOrigins("https://localhost:3000", "http://localhost:3000")
.AllowAnyMethod()
.AllowAnyHeader()
.AllowCredentials())
UPDATE
The CORS errors:
UPDATE 2
I also forwarded the port 44372 which I have the Web API on and the error changed to: net::ERR_CERT_AUTHORITY_INVALID. Is this an issue with the chrome on android? I'm not quite sure how to address it. The issue seems to be with the Web API server certificate, because SPA gets loaded properly.
I managed to solve the issue by opening https://localhost:44372 on the Device. There I got a security warning, but when I chose "proceed to localhost (unsafe)" I was able to reach Web API. Then https://localhost:3000 started working well.
I'm getting the errors when testing my application locally since I switched to https:
Warning: Domain www.example.com does not specify a meta-policy.
Applying default meta-policy 'master-only'. This configuration is
deprecated. See http://www.adobe.com/go/strict_policy_files to fix
this problem.
Error: Request for resource at
https://www.example.com/?json=user/get_logged_in_user by requestor
from http://localhost:8888/Test-debug/Test.swf is denied due to lack
of policy file permissions.
I tried changing my localhost to https but got the following error:
Secure Connection Failed
An error occurred during a connection to localhost:8888. SSL received
a record that exceeded the maximum permissible length. Error code:
SSL_ERROR_RX_RECORD_TOO_LONG
The page you are trying to view cannot be shown because the authenticity of the received data could not be verified.
Please contact the website owners to inform them of this problem.
From what I've read I can upload and add a policy file and changing secure to true but I don't want to allow calls from anywhere. Once the swf is on my server everything works fine.
Is there a way to get this to work locally for testing? Is there something that I can enable while testing like:
Security.allowDomain("localhost");
Or do I have to upload a cross domain policy and then delete that policy when I'm done testing?
Since my local site is running locally in the browser shouldn't it be able to make a connection to a https connection?
Using of https (btw it does not configured properly according to message you posted (did you use FireFox to test?)) will not help. The problem is that www.example.com does not have crossdomain.xml policy file, so flash player does not allow to access that domain from your localhots which is also a domain.
If you have an access to www.example.com add policy file here with wildcard access, if not - test via http is possible only with mocking response with some http proxy.
I changed to testing using file:// (no server) and it works making https calls.
I am facing an issue with my hosted project.
The request with link :- http://......./api_tester.html works fine and
provides results, but, it gives CORS 'Access-Control-Allow-Origin' Missing
when the api_tester.html file is accessed via the browser directly.
The URL for the file in the browser is file:///E:/workspace_windows/api_tester.html
Kindly suggest.
It seems you are trying to open the file directly from desktop, hence it is picking its protocol file:// protocol. Use either complete url starting with HTTP or run from any web server. Secondly error you stated means you are trying to access the page hosted on another domain and this usually happens when you do XHR requests to domain other than the one where your file is hosted.
You can add header "ACCESS-CONTROL-ALLOW-ORIGIN" to the file you are trying to access to allow all requests to be accessible from all different domains.