So i tried to make my first request with passport set up, im being blocked by cors even if i set up my dashboard and my cors options are correctly done.
Also none of my console.logs are showing up even if i can see the requests sent from the front end like in 3rd pic. (this by using the chrome plugin to bypass cors)
passportSetUp
auth function
cors bypassed with chrome plugin
I solved it by using an a tag instead of making the actual fetch request.
example :
<a href="link to my backend route" </a>
In this way the href will make a get request to that link!
Related
This question already has answers here:
create a trusted self-signed SSL cert for localhost (for use with Express/Node)
(17 answers)
Closed 7 months ago.
I'm trying to login with google on my svelte app, by sending a request to an express server, but on Firefox I'm getting a Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://localhost:8080/login. (Reason: CORS request did not succeed). Status code: (null). error and on Chrome I get GET https://localhost:8080/login net::ERR_SSL_PROTOCOL_ERROR,
this is my code on express :
"use strict";
import express from "express";
import cors from 'cors';
import { getAllForms } from "./services/get_form";
import { googleLogin } from "./services/auth";
const app = express();
app.use(cors({
origin: 'https://localhost:3000',
}))
app.get("/login", (req, res) => {
const auth = googleLogin();
res.send(auth);
})
app.listen(8080)
and frontend :
<script>
import HomeDialog from '../components/dialog/HomeDialog.svelte';
const login = async () => {
await fetch('https://localhost:8080/login').then((response) => {
console.log('response', response);
});
};
</script>
<svelte:head>
<title>Jamboit - Create a Game</title>
</svelte:head>
<HomeDialog
>Create a new Game
<button on:click={login}> Log in </button>
</HomeDialog>
any tips on how to make this work?
You cannot use the https protocol unless your server is setup with HTTPS, a valid certificate, and a valid private key. The certificate does not have to be issued by a public Certificate Authority (i.e. it can be self signed), but it must be trusted by the system. To fix the error, simply change the protocol to http. Make sure that the origin also match with the correct protocol in the CORS configuration; it might need to be http.
app.use(cors()) // only this should works for every case also you can try
app.use(cors({
origin: '*' // that will for all like https / http
}))
For Specific Origin :
app.use(cors({
origin: ['your site url','your site url'] // for allowing multiple sites
}))
I have written this simple guide to explain the main solutions for disabling cross origin restrictions
on localhost (and therefore fixing any CORS errors whilst developing your
app locally), which I will explain in more detail below.
Use the proxy setting in Create React App
Create React App comes with a config setting which allows you to simply proxy API requests in development. This is available in react-scripts#0.2.3. To do this add the proxy setting to your package.json like this
"proxy": "https://cat-fact.herokuapp.com/",
Now when you make an API request to https://localhost:3000/api/facts Create React App will proxy the API request to https://cat-fact.herokuapp.com/facts and the CORS error will be resolved.
This is a really simple solution which might not work with more complicated situations where multiple API’s are involved, or certain types of API authentication is needed.
Disable CORS in the browser
You can directly disable CORS in the browser. If you do this, please be aware that you are disabling security restrictions which are there for a reason. I wouldn’t recommend browsing the web with CORS disabled; Just disable it whilst developing your website/app.
Chrome (on Mac):
The most reliable way to disable CORS in the latest version of Chrome on Mac (tested on v84) is to run it with web security disabled.
Force quit Chrome by going to the mac menu and pressing “force quit” (or pressing command Q).
Then run this command to open Chrome with web security disabled
open -n -a /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome — args — user-data-dir=”/tmp/chrome_dev_test” — disable-web-security
Once you’re done developing, restart Chrome and it will go back to normal.
Firefox:
The easiest and most reliable way to disable CORS in Firefox is to install the CORS Everywhere plugin.
Safari:
The easiest and most reliable way to CORS in Safari is to disable CORS in the develop menu.
Enable the develop menu by going to Preferences > Advanced.
Then select “Disable Cross-Origin Restrictions” from the develop menu.
Once you’re done developing, restart Safari and it will go back to normal.
Use a proxy to avoid CORS errors
Finally you could use a proxy like cors-anywhere.
the link to the code link
I am using axios and nodejs.
All routes work and give a response except one. which returns Network error.
that route is /api/ads/myads.
The route works on its own but when used with redux actions it doesn't
The network tab says that this request was blocked.
So I tried to add cors but that didn't solve the issue.
The file in question is .../actions/adActions this one is producing the error while others don't
I will be uploading the code in a minute
This turned out to be my adblocker thinking this was actual ads
So I'm having a problem getting my MEAN stack application to provide oauth with Facebook using PassportJS. Namely, I can't figure out how to get CORS to work on the Angular side of the application.
In my application the angular application sends a get request through a user facing click action:
<button (click)="onFacebookLogin()" class="loginBtn loginBtn-facebook">
<span><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14082/icon_facebook.png"/></span>| Login with Facebook
</button>
which eventually leads to this get request in my loginService:
facebookLoginUser(): Observable <User> {
return this.http.get('users/auth/facebook')
}
This of course takes me to my route which uses passport.js:
// This part is in a 'users' module which is why you don't see 'users' prepend the route
router.get('/auth/facebook', passport.authenticate('facebook', {
scope: ['email', 'photos']
}))
Now this piece of code returns an error from Facebook saying that 'photos' is an improper scope (something that I will address later). My problem is that the request delivers no error to my server and instead delivers the error (and I would presume the eventual object) to the angular application (I see the error in the browser console). The browser, naturally, complains about this since facebook is trying to communicate with it on a request that it didn't initiate (cors). My question is, how do I fix this?
Recommendations from this SO question say that I must navigate to the suggest that I need to navigate to the page that I'm making the request from. I've tried making the button a link with an anchor element and href but that doesn't work. Also that question uses angular.js and I don't think providing a new route with my router and creating a whole new view seems very prudent. Besides that, I still feel like Facebook would be returning the user to the angular application and not my express application like I intend. Does andybody know what I should do?
Update
Error Code
Failed to load https://www.facebook.com/dialog/oauth?response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Fauth%2Ffacebook%2Fcallback&scope=email%2Cphotos&client_id=2087173708182970: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.
As CBroe commented, the method I was using to make the call was wrong as it couldn't be performed in an ahax-y way. I ended up using an anchor tag with an target=_blank attribute with an href that pointed directly at my backend passport facebook oauth route. So something like this:
<a href="http://localhost:3000/users/auth/facebook" target="_blank" class="loginBtn loginBtn-facebook">
<span><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14082/icon_facebook.png"/></span>| Login with Facebook
</a>
Everything works now
Trying to implement Google OAuth2 and using https://github.com/google/google-api-nodejs-client#authorizing-and-authenticating as reference. When redirecting user to consent page like this
var url = oauth2Client.generateAuthUrl({
access_type: 'offline',
scope: some_scope
});
res.redirect(url);
I get this error in browser console (links edited):
XMLHttpRequest cannot load localhost:8080/myPageName. Redirect from localhost:8080/myPageName to accounts.google.com/o/oauth2/auth?access_type=... has been blocked by CORS policy: Request requires preflight, which is disallowed to follow cross-origin redirect.
The strange thing is that I am getting this error only when executing the flow from GUI (user presses the button; angular2 front-end). When I put localhost:8080/myPageName directly into the browser address bar everything works fine (get consent form and then tokens).
Any help is appreciated. Thank you.
I had the same issue (with a react frontend, but it's the same).
This is probably because from the server you use redirect, which triggers CORS (even if from your server you allow it).
you have to return the redirect URL to your front-end in some other way, capture it from the front-end app and then call the URL you need to invoke.
A simple solution is create a hidden link with the required query parameters and click the link using JavaScript, if google supports HTTP POST submission then a hidden form can be created and submitted directly again using JavaScript magic to bypass the CORS restriction which I guess is either already removed or will be removed in near future.
I'm using passport with facebook strategy for authentication. Problem doesn't reside in the back-end which is nodejs, as i have tested without angularjs and everything works just fine, but whenever angularjs comes into play i'd get CORS error.
Access-Control-Allow-Origin header is present on the requested resource. Origin host:8000 is therefore not allowed access.
I have tried most of the solutions i have found via google, but nothing has really worked so far. Does anyone have an idea what might be wrong?
This is the most common answer usually to this sort of question as far as i understand.
site.config(function($httpProvider) {
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
});
And like i said, it is not nodejs fault.
You'll need to use a popup to get around the CORS issue with Angular.. see this post for an example: http://www.webdeveasy.com/single-page-application-authentication/