javascript - 在我们的 nodejs 应用程序中出现“Access-Control-Allow-Origin”错误
问题描述
我们的 nodeJS 应用程序部署在AWS-lambda上,我们正在尝试请求身份验证并在控制台中收到此错误
从源“https://our-app.netlify.app”访问“https://vklut41ib9.execute-api.ap-south-1.amazonaws.com/dev/api/auth/login”处的 XMLHttpRequest被 CORS 策略阻止:请求的资源上不存在“Access-Control-Allow-Origin”标头。
但奇怪的是,当我们尝试使用错误的凭据时,我们没有收到此错误
就在我们尝试使用真实凭据进行访问时,我们遇到了 cors 错误
我们的 app.js 代码:
const dotenv = require("dotenv");
const express = require("express");
const app = express();
const cors = require("cors");
const session = require("express-session");
const passport = require("passport");
const serverless = require("serverless-http");
// const http = require("http");
// var server = http.createServer(app);
dotenv.config({ path: "./src/config/config.env" });
// files
const connectDb = require("./src/config/db");
const auth = require("./src/routes/apis/auth");
const user = require("./src/routes/apis/user");
// database connection
connectDb();
app.use(cors());
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.use(express.json());
app.use(express.urlencoded({ extended: false }));
// passport config
require("./src/config/passport")(passport);
// passport middleware
app.use(passport.initialize());
app.use(passport.session());
app.use(
session({
secret: "key",
resave: false,
saveUninitialized: false,
})
);
app.use("/api/auth", auth);
app.use("/api/users", user);
module.exports.handler = serverless(app);
我们的认证路线:
// auth route for login user
router.post("/login", async (req, res) => {
const { workerId, workerPassword } = req.body;
try {
const foundUser = await User.findOne({ workerId });
if (!foundUser) {
return res.status(404).json({
message: "Employee does not exist (Invalid Employee ID)",
});
} else if (foundUser.totalLoginAttemptLeft > 0) {
const checkPasswordData = await checkPassword(workerPassword, foundUser);
if (!checkPasswordData.isMatch) {
await passwordNotMatched(res, checkPasswordData.updatedWorker);
} else {
const jwtToken = await totalLogin(foundUser, reset);
return res.status(200).json({ token: "Bearer " + jwtToken });
}
}
} catch (error) {
console.error(error.message);
return res.status(500).json({ message: error.message });
}
});
令牌生成代码:
const jwt = require("jsonwebtoken");
// make jwt token
const makeToken = async (payload) => {
const jwtToken = jwt.sign(payload, process.env.SECRET_KEY, {
expiresIn: "7d",
});
if (!jwtToken) {
console.log(err);
return false;
}
return jwtToken;
};
module.exports = makeToken;
客户端登录处理
const loginUser = (loginInfo, loginType) => async (dispatch) => {
try {
const { baseUrlNode } = await helperFunction.checkLoginType(
loginType
);
const loginSuccess = await axios.post(
`${baseUrlNode}${api.Auth_Api.LOGIN_API}`,
loginInfo
);
// console.log(loginSuccess);
const { token = "" } = loginSuccess.data;
const { id, workerId, workerAadharCardNumber } = jwt_decode(
token
);
if (id && workerId && workerAadharCardNumber && loginType) {
await setLocalStorage(token, loginType);
setAuthToken(token);
const decoded = jwt_decode(token);
dispatch(setCurrentUser(decoded));
} else {
dispatch(setAuthLoading(false));
const errorData = {
data: { message: "Not able to login" },
status: 400
};
dispatch({
type: types.AuthTypes.AUTH_GET_ERRORS,
payload: errorData
});
}
} catch (loginError) {
const errorData = {
data: loginError.response.data,
status: loginError.response.status
};
dispatch({
type: types.AuthTypes.AUTH_GET_ERRORS,
payload: errorData
});
}
};
解决方案
No 'Access-Control-Allow-Origin' header present 错误可能由于以下任何原因而发生:
- 方法类型(例如 GET、PUT 或 POST)未配置为返回所需的 CORS 标头。
- API 未配置返回所需 CORS 标头的 OPTIONS 方法
- 具有代理集成或非代理集成的 API 未配置为返回所需的 CORS 标头。
因此,我建议添加此代码或仅使用允许方法类型(GET、POST、PUT 等)的部分更新您的代码
app.use((req, res, next) => {
res.header("Access-Control-Allow-Origin", "*");
res.header(
"Access-Control-Allow-Headers",
"Origin, X-Requested-With, Content-Type, Accept, Authorization, 'Content-Type' : 'multipart/form-data' ,* "
);
res.header(
"Access-Control-Allow-Methods",
"GET, POST, PATCH, PUT, DELETE, OPTIONS"
);
next();
});
另外,我建议阅读这篇文章
还有这篇文章2
推荐阅读
- mysql - 存储过程中的临时表返回的值与常规查询不同
- reactjs - 我重复使用了我的 React Element 两次,第二次没有响应点击
- c - 初学者需要简单解释评估顺序和优先级/关联性之间的区别
- windows - 在 powershell 脚本中使用 cmd 命令?
- javascript - 覆盖 R Shiny 模态对话框中的关闭按钮
- python - 为什么 scipy.optimize 没有给我正确的答案?
- android - 不显示某些视图的 viewPager 指示器
- c# - 将外部文本文件导入 Xamarin Forms 应用程序
- laravel - 如何在 VueJS 的 SetTimeOut 中提交存储
- c# - 如何在 Unity 中保留对粒子系统模块结构的引用