netlify&quot no访问控制 - 允许 - 柔性孔'标题存在于请求的资源上。即使起源是在我的Express API上设置的
我在Netlify上托管了我的React应用程序,并且正在遇到CORS问题,即使我在Express API上定义了所需路线的ERENS,我仍会遇到以下错误:
通过'https://e46finder.herokuapp.com/auth'从原始''https://warm-warm-trifle-0ebd9b.netlify.app'访问XMLHTTPREQUEST'https://e46finder.herokuapp.com/auth''请求的资源上存在允许孔的标题。
对我来说,对我的意义不太有意义,当我从前端的另一个路线向我的API请求时,让我们以“/scrape”端点为例,例如,它返回到我的前端,没有任何错误,并且该请求是从该端口发送的这两个请求' https://warm-warm-trifle-0ebd9b.netlify.app 。
我做了一些挖掘,发现了这篇文章 htttps:// https:// Answers.netlify.com/t/access-control-allow-origin-policy/1813/2 说他基本上与我遇到了相同的问题,并且能够通过添加'[headers.Values]访问来解决它-control-allow-origin = *'在他的netlify.toml文件中,所以我也很累,但是它仍然没有解决我的问题。
我的API Express代码:
const cors = require("cors");
const corsOptions ={
origin: ['https://warm-trifle-0ebd9b.netlify.app', 'https://warm-trifle-0ebd9b.netlify.app/'],
credentials:true, //access-control-allow-credentials:true
preflightContinue: true,
optionSuccessStatus:200,
}
app.use(cors(corsOptions));
async function getcookie(req) {
res.send()
var authCookie = await req.cookies.AccessToken;
accessToken = globalToken;
if (authCookie = await req.cookies.AccessToken) {
try {
if (authCookie === req.headers.cookie) {
authCookie = authCookie
.split('; ')
.find(row => row.startsWith('AccessToken='))
.split('=')[1];
} else {
return false
}
}
catch (error) {
console.log(error)
}
finally {
if (authCookie == accessToken) {
return true
} else {
return false
}
}
} else {
return false
}
};
app.get('/auth', async (req, res) => {
var authornot = await getcookie(req);
if (authornot === true) {
if (keepUserLoggedIn == true) {
res.cookie("LoggedIn", true, {
sameSite: 'None',
path: '/',
httpOnly: false,
maxAge: 3600 * 1000 * 24 * 365 * 10,
secure: true
});
} else {
res.cookie("LoggedIn", true, {
sameSite: 'None',
path: '/',
httpOnly: false,
secure: true
});
};
res.status(200).json(true);
} else {
res.status(401).send(authornot);
res.status(401).json(false);
}
res.send();
});
app.get('/scrape', async (req, res) => {
scraper(res, counter);
});
我的netlify.toml文件
# The following redirect is intended for use with most SPAs that handle
# routing internally.
[[redirects]]
from = "/*"
to = "/index.html"
status = 200
[[headers]]
# Define which paths this specific [[headers]] block will cover.
for = "/*"
[headers.values]
Access-Control-Allow-Origin = *
I am hosting my React app on netlify and am having a CORS issue where even though I have my origin defined on my express API for the desired route I am still getting the following error:
Access to XMLHttpRequest at 'https://e46finder.herokuapp.com/auth' from origin 'https://warm-trifle-0ebd9b.netlify.app' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
What makes even less sense to me is that when I make a request to my API from another route on my frontend, let's take my '/scrape' endpoint for example It returns to my frontend with no errors and the request is being sent from the same origin for both request 'https://warm-trifle-0ebd9b.netlify.app'.
I did some digging and found this post https://answers.netlify.com/t/access-control-allow-origin-policy/1813/2 saying that he basically had the same issue as me and was able to fix it by adding '[headers.values] Access-Control-Allow-Origin = *' in his netlify.toml file so I also tired that but it still did not fix my issue.
My API express code:
const cors = require("cors");
const corsOptions ={
origin: ['https://warm-trifle-0ebd9b.netlify.app', 'https://warm-trifle-0ebd9b.netlify.app/'],
credentials:true, //access-control-allow-credentials:true
preflightContinue: true,
optionSuccessStatus:200,
}
app.use(cors(corsOptions));
async function getcookie(req) {
res.send()
var authCookie = await req.cookies.AccessToken;
accessToken = globalToken;
if (authCookie = await req.cookies.AccessToken) {
try {
if (authCookie === req.headers.cookie) {
authCookie = authCookie
.split('; ')
.find(row => row.startsWith('AccessToken='))
.split('=')[1];
} else {
return false
}
}
catch (error) {
console.log(error)
}
finally {
if (authCookie == accessToken) {
return true
} else {
return false
}
}
} else {
return false
}
};
app.get('/auth', async (req, res) => {
var authornot = await getcookie(req);
if (authornot === true) {
if (keepUserLoggedIn == true) {
res.cookie("LoggedIn", true, {
sameSite: 'None',
path: '/',
httpOnly: false,
maxAge: 3600 * 1000 * 24 * 365 * 10,
secure: true
});
} else {
res.cookie("LoggedIn", true, {
sameSite: 'None',
path: '/',
httpOnly: false,
secure: true
});
};
res.status(200).json(true);
} else {
res.status(401).send(authornot);
res.status(401).json(false);
}
res.send();
});
app.get('/scrape', async (req, res) => {
scraper(res, counter);
});
My netlify.toml file
# The following redirect is intended for use with most SPAs that handle
# routing internally.
[[redirects]]
from = "/*"
to = "/index.html"
status = 200
[[headers]]
# Define which paths this specific [[headers]] block will cover.
for = "/*"
[headers.values]
Access-Control-Allow-Origin = *
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论