[英]Getting a 500 Internal server error when redirecting to the callback url using google OAuth2 with Passportjs
[英]Getting CORS error when using PassportJS for Google OAuth in React/Express
盡管找了幾個小時,我還是找不到簡單的 cors 錯誤的解決方案。 我在瀏覽器中得到以下內容:
在 'https://accounts.google.com/o/oauth2/v2/auth?response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A3001%2Fapi%2Fauth%2Fauth%2Fgoogle%2Fcallback&scope=profile%20email&client_id 訪問 XMLHttpRequest =******.apps.googleusercontent.com'(從 'http://localhost:3000/api/auth/auth/google' 重定向)來自 'http://localhost:3000' 已被阻止CORS 策略:請求的資源上不存在“Access-Control-Allow-Origin”header。
為了這篇文章的安全原因,我剛剛替換了客戶端 ID。 當我在 Postman/Thunder Client 中進行此調用時,它會返回 200 響應並且似乎工作正常
所以我嘗試在快遞app.use(cors());
還嘗試在 server.js app.all("/*", function (req, res, next) { res.header("Access-Control-Allow-Origin", "*"); next(); });
我也嘗試過使用`
const proxy = require('http-proxy-middleware');
module.exports = function(app) {
app.use(proxy("/api/auth/auth/google", {
target: "https://localhost:3000/",
changeOrigin: true
}));
}
我剛剛完成了我在 SO 上找到的書中的所有解決方案,但到目前為止似乎沒有一個有效。 任何幫助將不勝感激這是我的代碼:
Package.json在客戶端
{
"name": "tasktracker",
"proxy": "http://localhost:3001/",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.13.0",
"@testing-library/react": "^11.2.7",
"@testing-library/user-event": "^12.8.3",
"axios": "^0.21.1",
"http-proxy-middleware": "^2.0.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
主頁.js
import React from "react";
import API from "../components/utils/API";
export default function HomePage() {
const handleLogin = () => {
API.login();
};
const testing = () => {
console.log("Hello world!");
API.testing();
};
return (
<div>
<h1>Let's login with Google</h1>
<button onClick={handleLogin}>Login</button>
<button onClick={testing}>Testing</button>
</div>
);
}
API.js
import axios from "axios";
export default {
login: function () {
return axios.get("/api/auth/auth/google");
},
testing: function () {
return axios.get("/api/auth/test");
},
};
服務器.js
const express = require("express");
const passport = require("passport");
const routes = require("./routes");
const app = express();
const PORT = process.env.PORT || 3001;
const cors = require("cors");
app.use(cors());
// Define middleware here
app.use(express.urlencoded({ extended: true }));
app.use(express.json());
require("./config/passport");
app.use(passport.initialize());
// Add routes, both API and view
app.use(routes);
// Start the API server
app.listen(PORT, function () {
console.log(`🌎 ==> API Server now listening on PORT ${PORT}!`);
});
auth.js (認證路由)
const router = require("express").Router();
const passport = require("passport");
const cors = require("cors");
const CLIENT_HOME_PAGE_URL = "http://localhost:3000";
/Route is api/auth/test
router.get("/test", function (req, res) {
res.send(console.log("Test to backend"));
});
//Route is api/auth/auth/google/callback
router.get(
"/auth/google/callback",
passport.authenticate("google", {
successRedirect: CLIENT_HOME_PAGE_URL,
failureRedirect: "/",
session: false,
}),
function (req, res) {
var token = req.user.token;
res.redirect("http://localhost:3000?token=" + token);
}
);
//Route is api/auth/auth/google/
router.get(
"/auth/google",
passport.authenticate("google", { scope: ["profile", "email"] })
);
module.exports = router;
Passport.js
var passport = require("passport");
var GoogleStrategy = require("passport-google-oauth").OAuth2Strategy;
passport.serializeUser(function (user, done) {
done(null, user);
});
passport.deserializeUser(function (user, done) {
done(null, user);
});
passport.use(
new GoogleStrategy(
{
clientID:
"*****",
clientSecret: "*****",
callbackURL: "http://localhost:3001/api/auth/auth/google/callback",
},
function (accessToken, refreshToken, profile, done) {
var userData = {
email: profile.emails[0].value,
name: profile.displayName,
token: accessToken,
};
done(null, userData);
}
)
);
我知道這篇文章有點長,如果有人有任何想法或解決方案會對我有很大幫助。
我最近面臨同樣的問題。 使用
window.location.href = "http://localhost:5000/api/auth/google"
代替
axios.get("/api/auth/auth/google")
解決了這個問題。
成功認證后,如果要將用戶重定向到用戶發出登錄請求的原始 url,您可以這樣做...
const currentUrl = window.location.href
const encodedParam = encodeURI(`?redirectUrl=${currentUrl}`)
window.location.href = `http://localhost:5000/api/auth/google${encodedParam}`
將重定向值存儲在 session
req.session.redirectPath = req.query.redirectUrl
並在身份驗證后,在您的回調路由中使用它
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.