Fetching API data on localhost with VueJS - vue.js

So this is my function, really simple:
mounted: function(){
this.$http.get('http://localhost:80/gaming/api/game/1').then((data)=>{
console.log(data.body);
});
}
My VueJS app runs on port 8080, and my PHP runs on XAMPP on port 80.
When I try to fetch something from my API I get the following error:
Uncaught (in promise) Response {url: "http://localhost:80/gaming/api/game/1", ok: false, status: 0, statusText: "", headers: Headers, …}
What can I do?

add header("Access-Control-Allow-Origin: *"); to allow CORS on php.
good luck

Did you enable CORS? Use Developer tools to verify that your call is not failing due to CORS. Installing CORS extension in chrome and enabling CORS can help. Alternatively, if you have to run the application on localhost only, then add OPTIONS in your PHP application.

Related

I am getting CORS error when calling grail api from angular front end

I am having a grails api which is hosted in azure. Below is the configuration of application in application.yml
grails:
cors:
enabled: true
allowedHeader: ["Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With"]
allowedMethods: [GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS]
maxAge: 3600
allowedOrigins: "*"
When running locally it is working just fine but when i deploy it to azure and call any api ,it gives me CORS error.
Any help/suggestion is welcome.
Thanks
I think you add the config in the wrong format. You can try this:
grails:
cors:
enabled: true

I can see live app on secured port 443 red5pro

I prepared server ubuntu like from docs. I created SSL cert to my domin and i have open required ports. I installed red5pro in to /usr/local/red5pro/ and server fine. When i will go to http://example.com:5080/ i can see home page red5pro and is ok. But when i click on broadcast i have a info: No suitable Publisher found. WebRTC & Flash not supported. Ok, maybe because is http not https. I decided create test index page in to /var/www/test/index.html and i have basic configuration like:
var config = {
protocol: 'wss',
host: 'example.com',
port: 443,
app: 'live',
streamName: 'abccaccaa',
rtcConfiguration: {
iceServers: [{urls: 'stun:stun2.l.google.com:19302'}],
iceCandidatePoolSize: 2,
bundlePolicy: 'max-bundle'
} // See https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/RTCPeerConnection#RTCConfiguration_dictionary
};
And now when i try broadcast have an info: WebSocket connection to 'wss://example.com/live/?id=abccaccaa' failed: Error during WebSocket handshake: Unexpected response code: 404
Looks like have no example.com/live and cant figure out what is wrong :( since 2 days. Maybe someone could give me an advice ? Or alternative on other application than red5pro

Express proxy for socket.io

Running microservices architecture, I would like to forward all my socket.io traffic through my gateway to the socket.io microservice. My gateway is running express. My current implementation looks like this:
import proxy from 'http-proxy-middleware';
import express from 'express';
import cors from 'cors';
const app = express();
app.use(cors())
// proxy middleware options
const options = {
target: 'http://127.0.0.1:1234/test',
changeOrigin: true,
secure: false,
ws: true
};
const exampleProxy = proxy(options);
app.use('/socket.io', exampleProxy);
app.use('/upgrade', exampleProxy);
app.listen(port);
The strange this is that the GET requests go through to my service, so I get the socket connection, but when trying to emit an event from the socket.io client (POST request), the request times out.
My express server logs, via morgan, the following in this case:
[HPM] Error occurred while trying to proxy request /socket.io/?EIO=3&transport=polling&t=MrZfNeU&sid=cR-5g0531PU9XxiGAAAN from localhost:2999 to http://127.0.0.1:1234/test (ECONNRESET) (https://nodejs.org/api/errors.html#errors_common_system_errors)
My front-end displays cors error:
Access to XMLHttpRequest at 'http://localhost:8888/socket.io/?EIO=3&transport=polling&t=MrZfNeU&sid=cR-5g0531PU9XxiGAAAN' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
When connecting directly to the socket.io server, it works perfectly. What could be the issue? Thanks!
Problem has been solved by placing the bodyParser below the proxy as mentioned in the following comment.
Apparently you receive a CORS error.
(CORS is Cross-Origin-Resource-Sharing)
Can you activate cors middleware? in express side.
Source: https://expressjs.com/en/resources/middleware/cors.html

Meteor/Apollo: SSL Access for HTTPS and WS?

I’m trying to get SSL working in Meteor for https and websockets. I’m getting this error:
(STDERR) Error: listen EACCES 0.0.0.0:443
Here's my setup.
For SSL access I have installed nourharidy/meteor-ssl. I can use any comparable package or approach that people have found useful!
As required by nourharidy/meteor-ssl, in server/main.js I have:
SSL('/path/to/private/server.key','/path/to/private/server.crt', 443);
Here's the rest of my setup:
My ROOT_URL environment variable is:
https://10.0.1.10:443 //I’m using my Mac’s ip address so that another Mac can access it
In imports/startup/server/index.js I have:
//SET UP APOLLO QUERY / MUTATIONS / PUBSUB
const USING_HTTPS = true;
const httpProtocol =  USING_HTTPS ? "https" : "http";
const localHostString = '10.0.1.10' //I’m using my Mac’s ip address so that another Mac can access it
const METEOR_PORT = 443;
const GRAPHQL_SUBSCRIPTION_PORT = 4000;
const subscriptionsEndpoint = `wss://${localHostString}:${GRAPHQL_SUBSCRIPTION_PORT}/subscriptions`;
const server = express();
server.use('*', cors({ origin: `${httpProtocol}://${localHostString}:${GRAPHQL_SUBSCRIPTION_PORT}` }));
server.use('/graphql', bodyParser.json(), graphqlExpress({
    schema
}));
server.use('/graphiql', graphiqlExpress({
    endpointURL: '/graphql',
    subscriptionsEndpoint: subscriptionsEndpoint
}));
// We wrap the express server so that we can attach the WebSocket for subscriptions
const ws = createServer(server);
ws.listen(GRAPHQL_SUBSCRIPTION_PORT, () => {
    console.log(`GraphQL Server is now running on ${httpProtocol}://${localHostString}:${GRAPHQL_SUBSCRIPTION_PORT}`);
    // Set up the WebSocket for handling GraphQL subscriptions
    new SubscriptionServer({
        execute,
        subscribe,
        schema
    }, {
        server: ws,
        path: '/subscriptions',
    });
});
What am I missing?
Thanks very much in advance to all for any info!
The way Stack Overflow works is that you put some effort in, and get close to the problem, and we'll help you get through that last bit. Asking for help on how to use Google is what we call off-topic.
If you have done a Google search for Error: listen EACCES 0.0.0.0:443 would have yielded a bunch of results, the first of which is this:
Node.js EACCES error when listening on most ports
So I am willing to be helpful, but you need to help yourself too
Solved it! It turns out my server setup was fine.
Server-side I was building the WSS url like so:
var websocketUri = Meteor.absoluteUrl('subscriptions').replace(/http/, 'ws').replace('3100', '3200');
The Meteor docs for absoluteUrl say:
The server reads from the ROOT_URL environment variable to determine where it is running.
In Webstorm I have ROOT_URL set to https://10.0.nn.nn:3100. But for some reason absoluteUrl was returning http://10.0.nn.nn:3000. I.e. it had the wrong port.
After correcting the port-- it’s working!
UPDATE: I thought I had it solved when I posted a few days ago, but I was still missing something.
I'm now using ngrok to provide SSL to my dev system for use with HTTPS and WSS.
Here are a few details.
I run Meteor on localhost:3000.
I assign the value of "http://localhost:3000" to the ROOT_URL environment variable.
I run two simultaneous ngrok connections, one for HTTPS and one for WSS:
./ngrok http 3000
./ngrok http 3200
This gives me two ngrok urls, for example:
Forwarding https://9b785bd3.ngrok.io -> localhost:3000
Forwarding https://ec3d8027.ngrok.io -> localhost:3200
I access my app via the ngrok url, for example:
https://9b785bd3.ngrok.io
I build my HTTPS links and WSS links based on the ngrok addresses. For example:
const wssEndpoint = 'wss://ec3d8027.ngrok.io/subscriptions';
I hope this is helpful to others looking into this.

Integrate http apache with kaazing gateway

I am running an app on http apache 2.4 through which I am trying to connect to a kaazing gateway. I have followed the
instructions that are found in kaazing site at "setup-guide.html#webserver_integrate" section, but the connection keeps failing: the Mozilla console prints:
TypeError: this._socket is undefined, 4146 XmppClient.js
I changed the <allow origin> with an *. I would like to ask whether I should make any changes on the configuration file of apache.
Finally, I managed it to work. I made a new install of kaazing gateway. In gateway-config.xml at the GATEWAY_HOME/conf/ I changed the value of the gateway.hostname with my internal ip and set the
*
at
<cross-site-constraint>
<allow-origin>*</allow-origin>
</cross-site-constraint>
in service with type: xmpp.proxy and this time worked! Also I changed '
*
with the
http://localhost:80
(http apache) and also worked. I don't know why didn 't it work before.
Thanks for trying to help!