I have been frantically trying for hours to get my email working.
This is the website:https://www.shafirpl.com/contact
I have a react app hosted on the same server ( a digital ocean droplet) as node.js app. The domain name(shafirpl.com) has SSL certificate from cloudflare. The node.js app is running on port 4000 while the react app on port 80. So what is happening now is that the react production build is running on port 80 of that IP address/server, and I have an axios post request when the user clicks the send button. When it was on my local machine it worked as the axios request was using "http://localhost:4000/email". But when I deployed on the server and changed the URL to "http://myServerIpAddress:4000/email" I get the error that says I have to send the request via https. I am not sure how to generate an SSL certificate so that my front end react app can commit the axios request and don't have the issue. I have tried to follow certbot tutorial but it seems like certbot requires a specific domain name. SO what I did is that I created key-cert pairs for my domain name (shafirpl.com) using this tutorial (https://dev.to/omergulen/step-by-step-node-express-ssl-certificate-run-https-server-from-scratch-in-5-steps-5b87) and am using in my server.js file (the node.js app brain) like this:
const express = require("express");
// const connectDB = require("./config/db");
const path = require("path");
const https = require("https");
const fs = require("fs");
// routes variables
const emailRoute = require("./routes/email");
const resumeRoute = require("./routes/resume");
// const authRoute = require("./routes/api/auth");
const app = express();
var cors = require("cors");
// var corsOptions = {
// origin: "*",
// optionsSuccessStatus: 200, // some legacy browsers (IE11, various SmartTVs) choke on 204
// };
app.use(cors());
app.options("*", cors());
// Connect Database
// connectDB();
// Middleware initialization
/*
* Usually we used to install body parser and do
* app.use(bodyparser.json()). But now bodyparser comes
* packaged with express. So we just have to do express.json()
* to use bodyparser
*/
app.use(express.json({ extended: false }));
// use this when on my pc
// app.use(function (req, res, next) {
// res.header("Access-Control-Allow-Origin", "http://localhost:3000"); // update to match the domain you will make the request from
// res.header(
// "Access-Control-Allow-Headers",
// "Origin, X-Requested-With, Content-Type, Accept"
// );
// next();
// });
// use this on produnction
// app.use(function (req, res, next) {
// res.header("Access-Control-Allow-Origin", "*"); // update to match the domain you will make the request from
// res.header(
// "Access-Control-Allow-Headers",
// "Origin, X-Requested-With, Content-Type, Accept"
// );
// next();
// });
// app.get("/", (req,res) => {res.send('API Running')});
// Define Routes
app.get("/", (req, res) => {
res.send("Server Running");
});
app.use("/email", emailRoute);
app.use("/resume", resumeRoute);
// app.use("/api/auth", authRoute);
// app.use("/api/profile", profileRoute);
// app.use("/api/posts", postsRoute);
// // serve static assets in production
// if (process.env.NODE_ENV === "production") {
// // set static folder
// app.use(express.static("client/build"));
// app.get("*", (req, res) => {
// res.sendFile(path.resolve(__dirname, "client", "build", "index.html"));
// });
// }
/*
* This means when the app will be deployed to heroku, it will
* look for a port specified by heroku. But since right now
* locally we don't have that, we will be running the app on
* port 5000
*/
// const PORT = process.env.PORT || 4000;
// app.listen(PORT, () => {
// console.log(`Server started on port ${PORT}`);
// });
app.listen(4000);
// comment out this line when testing on localhost
const httpsServer = https.createServer(
{
key: fs.readFileSync("/etc/letsencrypt/live/shafirpl.com/privkey.pem"),
cert: fs.readFileSync("/etc/letsencrypt/live/shafirpl.com/fullchain.pem"),
},
app
);
httpsServer.listen(443, () => {
console.log("HTTPS Server running on port 443");
});
And in my axios.post I am using like this
const url = "https://shafirpl.com:443/email";
const sendMessage = async () => {
const config = {
headers: {
'Content-Type': 'application/json',
}
}
const body = JSON.stringify({ name, email, company, message });
try {
const res = await axios.post(url, body, config);
console.log(res);
clearForm();
showSuccessMessage();
} catch (error) {
console.log(error);
showFailureMessage();
}
}
const showFailureMessage = () => {
setFailureAlert(true);
setTimeout(() => {
setFailureAlert(false)
}, 3000);
}
But right now I am again getting this error:
Access to XMLHttpRequest at 'https://shafirpl.com/email' from origin 'https://www.shafirpl.com' 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 actually don't know how to solve this as I am pretty new to the total MERN stack build. Can anyone help me with this? I just wanna send email using the axios
I had the same issue - what I did, I removed explicit ports from both server and client. Then I noticed that I was hitting http://mydomain.... please try accessing it from https://mydomain... that did the trick for me :) Hope it helps!
I think i fixed the issue. Instead of running 2 different application, I decided to serve my react build via my node.js app. The way I did was this:
const express = require("express");
// const connectDB = require("./config/db");
const path = require("path");
// routes variables
const emailRoute = require("./routes/email");
const resumeRoute = require("./routes/resume");
const app = express();
app.use(express.json({ extended: false }));
app.use("/api/email", emailRoute);
app.use("/api/resume", resumeRoute);
app.use(express.static("client/build"));
app.get("*", (req, res) => {
res.sendFile(path.resolve(__dirname, "client", "build", "index.html"));
});
app.listen(80);
Then on my axios request I just did that:
const url = "/api/email"; const sendMessage = async () => {
const config = {
headers: {
'Content-Type': 'application/json',
}
}
const body = JSON.stringify({ name, email, company, message });
try {
const res = await axios.post(url, body, config);
console.log(res);
clearForm();
showSuccessMessage();
} catch (error) {
console.log(error);
showFailureMessage();
}
}
Right now everything is working fine.
For the resume thing which sends a file download, instead of using /api/resume I had to do
something like this
<Nav.Link eventKey="6" activeClassName="active-nav" href="https://shafirpl.com/api/resume" target="_blank" rel="noopener noreferrer">Resume</Nav.Link>
And right now the resume download is also working fine
Thanks for all the help
Related
I have a deployed app on Heroku that allows me to play audio files. You can check it out here https://telecurve.herokuapp.com/manage. Before I had no issues playing the files in Heroku but after I modified my server.js file (my app is an Express app that is deployed with a built Create React app), I get this error. You can try playing an audio file and seeing the response. However, I am still able to download files from s3 with the download button and have no issues.
Here is some relevant code:
server.js
require('rootpath')();
const path = require('path');
const express = require('express');
const app = express();
const bodyParser = require('body-parser');
const cookieParser = require('cookie-parser');
const cors = require('cors');
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use(cookieParser());
// Have Node serve the files for our built React app
app.use(express.static(path.resolve(__dirname, 'build')));
// allow cors requests from any origin and with credentials
app.use(cors({ origin: (origin, callback) => callback(null, true), credentials: true }));
//change added that caused issues with the playing mechanism. Needed these headers for another
app.use(function(req, res, next) {
res.header("Cross-Origin-Embedder-Policy", "require-corp");
res.header("Cross-Origin-Opener-Policy", "same-origin");
next();
});
// file api routes
app.use('/accounts', require('./accounts/accounts.controller'));
// All other GET requests not handled before will return our React app
app.get('*', (req, res) => {
res.sendFile(path.resolve(__dirname, 'build', 'index.html'));
});
app.get('/app', async (req, res) => {
res.sendFile(path.join(__dirname, 'public/index.html'));
});
// does work, cors headers in response as expected
// start server
const port = process.env.PORT || 2000;
app.listen(port, () => console.log('Server listening on port ' + port));
this is the particular change in server.js that I added:
//change added that caused issues with the playing mechanism. Needed these headers for another
app.use(function(req, res, next) {
res.header("Cross-Origin-Embedder-Policy", "require-corp");
res.header("Cross-Origin-Opener-Policy", "same-origin");
next();
});
Maybe I need to add an additional header for s3?
I also recently removed this code:
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
Here is my presigning method in the backend that I use to generate urls to play/download from:
const customer_id = data['customer-id'];
const sound_id = data['sound-id'];
return new Promise((resolve, reject) => {
//get presigned url
var myBucket = process.env.NODE_APP_BUCKET_NAME;
var myKey = "sounds/" + customer_id + "/" + sound_id + ".wav";
const signedUrlExpireSeconds = 120;
try {
const url = s3.getSignedUrl('getObject', {
Bucket: myBucket,
Key: myKey,
ResponseContentDisposition: 'attachment',
Expires: signedUrlExpireSeconds
});
resolve(url)
}
catch {
console.log('S3 Object does not exist');
resolve('');
}
});
I then take this url, create a new audio object with var audio = new Audio(url) and play it.
Let me know if you see anything going wrong or if im missing anything.
You seem to directly use the URL pointing at your audio file on S3, meaning that:
Your audio is (in the eyes of your webpage) a cross-origin resource. With Cross-Origin-Embedder-Policy set to require-corp, adding a crossorigin attribute to your <audio/> (including Audio object) is required.
Your bucket might needs its CORS configured to allow your site to access it, as mentioned in this other question. The AWS documentation explains on how you can configure that.
Your app was down when I wrote this, so I couldn't actually validate it's caused by S3 cross-origin resources, but based on your question, it is the most likely issue.
Heroku backend Node.js and Netlify frontend react app has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
I've seen a lot of posts on this, but I just can't seem to fix what's creating this error. Of course, I believe it has to do with CORS. But as you can see, I've added multiple versions of CORS middleware to allow this to work. Locally everything is fine. Production/live is where I get the issue:
Access to XMLHttpRequest at 'https://seb-youtube-api.herokuapp.com//videos?page=1&limit=50' from origin 'https://seb-youtube-api.netlify.app' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Here is my backend server with Node.js and Express.js
They make a simple call to a youtube API.
require('dotenv').config();
const express = require('express');
const bodyParser = require('body-parser')
const app = express();
const cors = require('cors')
const chalk = require('chalk');
const { google } = require('googleapis');
const youtube = google.youtube('v3'); // initialize the Youtube API library
// Middleware
app.use(cors());
app.use(bodyParser.json());
/******************** GET REQUEST TO VIDEOS *********************/
app.get('/videos', async (req, res) => {
const results = await fetchYoutubePlaylist();
res.json(results)
})
// /******************** POST REQUEST, USER SEARCH *********************/
app.post('/videos', async (req, res) => {
console.log('POST QUERY',req.body)
const query = req.body
res.body = await fetchYoutubeSearch(query)
console.log("RES POST", res.body)
res.json(res.body)
})
app.use('*', cors(), (req, res) => {
return res.status(404).json({ message: 'Not Found' });
});
// CORS
app.use((req, res, next) => {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Headers', 'Content-Type,multipart/form-data,Authorization');
res.header('Access-Control-Allow-Methods', 'GET,POST,PUT,PATCH,DELETE');
if (req.method === 'OPTIONS') {
return res.send(204);
}
next();
});
/******************** FIRST YOUTUBE API CALL *********************/
const fetchYoutubePlaylist = async () => {
try {
const {data} = await youtube.playlistItems.list({
key: process.env.YOUTUBE_API_TOKEN,
part: ['snippet'],
maxResults: 50,
playlistId: "UUBh8XcZST_JTHt-IZDxT_pQ"
})
console.log(data)
return data.items
} catch(err) {
console.log(chalk.red(err))
}
}
/******************** SECOND YOUTUBE API CALL *********************/
const fetchYoutubeSearch = async ({query}) => {
console.log(query)
try {
const {data} = await youtube.search.list({
key: process.env.YOUTUBE_API_TOKEN,
part: ['snippet'],
q: query,
channelId: 'UCBh8XcZST_JTHt-IZDxT_pQ',
order: 'date',
type: 'video',
maxResults: 50
})
console.log('YOUTUBE SEARCH', data)
return data.items
} catch(err) {
console.log(chalk.red(err))
}
}
/******************** LIST TO PORT *********************/
const port = process.env.PORT || 3001;
app.listen(port, () => console.log(`Listing on port ${port}`));
Is the issue that your browser is blocking CORS? That happens to me with Heroku stuff sometimes. There are browser extensions to block/unblock CORS depending on the browser you're using
Stick only with app.use(cors()); that alone should work fine. Instead double check your Config Vars (env vars) on heroku and/or netlify wherever you set such variables. Sometimes that CORS error can be misleading being actually a connection error more about your environment variables.
I've deploy my node.js server into Azure by new AppService linux.
It correctly start, because if I call one http get it return the correct data.
But when I try to call the post url that make a:
server.post('/api/messages', (req, res) => {
adapter.processActivity(req, res, async (context) => {
// Process bot activity
await botActivityHandler.run(context).catch((e) => { console.dir(e) });
});)}
it return
UnhandledPromiseRejectionWarning: Error: BotFrameworkAdapter.processActivity(): 400 ERROR Error: BotFrameworkAdapter.parseRequest(): missing activity type.
I've already check if the bot have the correct appId and pwd, and it's are ok.
This is my index.js file:
// index.js is used to setup and configure your bot
const path = require('path');
const express = require('express');
const bodyParser = require('body-parser');
// Import required bot services.
// See https://aka.ms/bot-services to learn more about the different parts of a bot.
const { BotFrameworkAdapter } = require('botbuilder');
// Import bot definitions
const { BotActivityHandler } = require('./botActivityHandler');
// Read botFilePath and botFileSecret from .env file.
const ENV_FILE = path.join(__dirname, '.env');
require('dotenv').config({ path: ENV_FILE });
// Create adapter.
const adapter = new BotFrameworkAdapter({
appId: "XXXXXXXXXXXXXXXXXXXXXX",
appPassword: "XXXXXXXXXXXXXXXXXXXXXXX"
});
adapter.onTurnError = async (context, error) => {
console.error(`unhandled error: ${error}`);
console.dir(`unhandled error: ${error}`);
await context.sendTraceActivity(
'OnTurnError Trace',
`${error}`,
'https://www.botframework.com/schemas/error',
'TurnError'
);
await context.sendActivity('The bot encountered an error or bug.');
await context.sendActivity('To continue to run this bot, please fix the bot source code.');
};
// Create bot handlers
const botActivityHandler = new BotActivityHandler();
// Create HTTP server.
const server = express();
server.use(function (req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization");
res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
next();
});
server.use(bodyParser.json()); // to support JSON-encoded bodies
server.use(bodyParser.urlencoded({ // to support URL-encoded bodies
extended: true
}));
const port = process.env.port || process.env.PORT || 3978;
server.listen(port, () =>
console.log(`service listening at https://localhost:${port}`)
);
// Listen for incoming requests.
server.post('/api/messages', (req, res) => {
console.dir(adapter);
adapter.processActivity(req, res, async (context) => {
// Process bot activity
console.dir(context);
await botActivityHandler.run(context).catch((e) => { console.dir(e) });
});
});
server.post('/api/create/uat', (req, res) => {
console.dir(req.params);
});
server.get('/api/read/uat', (req, res) => {
console.dir(req.params);
});
server.post('/api/prova/post', (req, res) => {
console.dir(req.params);
});
Locally with ngrok it run ok, Can anyone help me?
Thanks.
As suggested by #Leonardo, Local and distributed app can be deleted and setup a new app by changing the URL.
I have created a simple server in node js to take the request from a react app.
But for the GET method there is no CORS error but whenever I do post, it gives me an error.
For the POST method to work, I have implemented in index.js file of the actions folder and it should hit the url from the server.js file.
index.js
import axios from 'axios';
export const GET_NAVBAR = "GET_NAVBAR";
export const LOGIN = "LOGIN";
export const BASE_API_URL = "http://localhost:3030";
export const GUEST_API_URL = "https://XXX.XXX.XXX.X:5443/wcs/resources/store/1";
export const getNavbar = () => {
return axios.get(BASE_API_URL + '/topCategory').then(res => {
return {
type: GET_NAVBAR,
payload: res.data.express.catalogGroupView
};
});
};
export const login = () => {
return axios.post(GUEST_API_URL + '/guestidentity', {}).then(res => {
console.log(res);
return {
type: LOGIN,
payload: {}
}
}).catch(e => {
console.log(e);
return {
type: LOGIN,
payload: {}
}
});
};
server.js
const express = require('express');
const cors = require('cors');
const bodyParser = require('body-parser');
const Client = require('node-rest-client').Client;//import it here
const app = express();
const helmet = require('helmet');
const morgan = require('morgan');
// enhance your app security with Helmet
app.use(helmet());
// use bodyParser to parse application/json content-type
app.use(bodyParser.json());
app.use(cors());
// log HTTP requests
app.use(morgan('combined'));
app.post('/guestidentity', (req, res) => {
var client = new Client();
// direct way
client.post("https://XXX.XXX.XXX.X:5443/wcs/resources/store/1/guestidentity", (data, response) => {
res.send({express: data});
});
});
const port = 3030;
app.listen(port, () => console.log(`Server running on port ${port}`));
I don't know where my code is getting wrong. Can anybody please help me to troubleshoot this issue. I would be grateful if someone could provide an insight or guide me a little. Thanks
For my part I used
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
It will accept from any * sources, you might want to change that later
In your server.js , add the following middleware.
var allowCrossDomain = function(req, res, next) {
res.header('Access-Control-Allow-Origin', 'http://localhost:3030/');
res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
res.header('Access-Control-Allow-Headers', 'Content-Type');
next();
};
app.use(allowCrossDomain);
I have deployed Angular/ NodeJS app on Heroku I get this error :
Mixed Content: The page at 'https://lit-island-95274.herokuapp.com/signup' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://localhost:4001/login'. This request has been blocked; the content must be served over HTTPS.
I think that the problem is about static urls that should be relative to the base Url of web server.
.Ts file
import { Injectable } from '#angular/core';
import { Headers, Http } from '#angular/http';
import { User } from './user';
#Injectable()
export class LoginService {
private headers = new Headers({ 'Content-Type': 'application/json' });
private loginUrl = 'http://localhost:4001/login'; // URL to web api
private registerUrl = 'http://localhost:4001/register';
constructor(private http: Http) { }
Login(login: User): Promise<number> {
console.log("login", login.username);
return this.http
.post(this.loginUrl, JSON.stringify(login), { headers: this.headers })
.toPromise()
.then((res) => res.json().login as number)
}
Register(register: User): Promise<any> {
return this.http
.post(this.registerUrl, JSON.stringify(register), { headers: this.headers })
.toPromise()
.then((res) => res.json().added as number)
}
private handleError(error: any): Promise<any> {
console.error('An error occurred', error); // for demo purposes only
return Promise.reject(error.message || error);
}
}
Here's the nodeJS Index.js file .
const express = require('express');
const path = require('path');
const http = require('http');
const bodyParser = require('body-parser');
var cool = require('cool-ascii-faces');
//var db = require('./db/connect.js');
// Get our API routes
//const api = require('./server/routes/api');
var appRoutes = require('./routes/index');
const app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
extended: false
}));
// Point static path to dist
app.use(express.static(path.join(__dirname, 'client/dist/')));
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header('Access-Control-Allow-Methods', 'GET, POST, PUT ,DELETE');
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
app.use('/', appRoutes)
// Set our api routes
//app.use('/api', api);
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, 'client/dist/index.html'));
});
app.get('/cool', function(request, response) {
response.send(cool());
});
const port = process.env.PORT || '4001';
app.set('port', port);
const server = http.createServer(app);
server.listen(port, () => console.log(`API running on localhost:${port}`));
If I have understood , instead of having http://localhost:4001/login I should get https://lit-island-95274.herokuapp.com/login. And this should be done automatically when deploying my app.
But I have no idea how to made that.
private loginUrl = 'http://localhost:4001/login'; // URL to web api
private registerUrl = 'http://localhost:4200/register';
if they are indeed hosted locally, its as easy as loginUrl = '/login'; or you could simply add the s to http, private loginUrl = 'https://localhost:4001/login'; Just fetch the urls over https. The problem is with the type of insecure fetch, not relative versus static urls.