我有一个 React 应用程序,我正在尝试使用 OAuth 添加 Node/Express/MySQL 后端。我的 React 应用程序托管在 localhost:3000 上,而 Express 服务器位于 localhost:4000 上。我添加了“代理”:”http://本地主机:4000" 到 React 应用程序的 package.json 文件以将请求发送到服务器。OAuth 的授权 Javascript 来源是http://本地主机:4000。授权重定向 URI 是http://localhost:4000/auth/google/redirect.
这些是当我尝试访问服务器上的路由时在浏览器控制台中遇到的错误:
有人说请求的资源上不存在“Access-Control-Allow-Origin”标头。
另一个说“跨源读取阻止 (CORB) 阻止了跨源响应......MIME 类型为 text/html。”
我不知道我做错了什么,从昨天开始我就被困住了。
Failed to load https://accounts.google.com/o/oauth2/v2/auth?response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A4000%2Fauth%2Fgoogle%2Fredirect&scope=profile&client_id={clientiddeletedbyme}.apps.googleusercontent.com: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.
Cross-Origin Read Blocking (CORB) blocked cross-origin response https://accounts.google.com/o/oauth2/v2/auth?response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A4000%2Fauth%2Fgoogle%2Fredirect&scope=profile&client_id={iddeletedbyme}apps.googleusercontent.com with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details.
这是我的 React 应用程序的 package.json 文件中的代码:
{
"name": "workout_tracker",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.18.0",
"firebase": "^5.3.0",
"jw-paginate": "^1.0.2",
"jw-react-pagination": "^1.0.7",
"normalize.css": "^8.0.0",
"random-id": "0.0.2",
"react": "^16.5.2",
"react-dom": "^16.5.2",
"react-headroom": "^2.2.2",
"react-icons-kit": "^1.1.6",
"react-redux": "^5.0.7",
"react-router-dom": "^4.3.1",
"react-scripts-cssmodules": "^1.1.10",
"react-swipe-to-delete-component": "^0.3.4",
"react-swipeout": "^1.1.1",
"redux": "^4.0.0",
"redux-thunk": "^2.3.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"devDependencies": {
"redux-devtools-extension": "^2.13.5"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"proxy":"http://localhost:4000"
}
这是我的 React 应用程序中将请求发送到服务器的代码:
express=()=>{
axiosInstance.get("/google").then(res=>{
console.log(res);
}).catch(err=>console.log(err));
}
这是服务器中的代码
let express = require("express");
let cors= require("cors");
let mysql = require("mysql");
const util = require("util");
const passportSetup = require("./config/passport-setup");
const passport = require("passport");
let app = express();
let connection =mysql.createConnection({
host: "localhost",
user: "root",
password: "root",
database: "Workout_Tracker",
socketPath: '/Applications/MAMP/tmp/mysql/mysql.sock'
});
app.use(cors(
{origin:"http://localhost:3000",
credentials:true,
allowHeaders:"Content-Type"
}
));
app.options("/google", cors());
app.get("/google", cors(), passport.authenticate("google",{
scope:['profile']
}));
...omitted a bunch of SQL queries
app.listen(4000, () => console.log("Listening on port 4000!"));