netlify&quot no访问控制 - 允许 - 柔性孔'标题存在于请求的资源上。即使起源是在我的Express API上设置的

发布于 2025-02-04 20:47:18 字数 3588 浏览 4 评论 0原文

我在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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文