CORS 问题：从 Vercel 前端向渲染后端发出 API 请求时“不存在‘Access-Control-Allow-Origin’标头”

Question

CORS 问题：从 Vercel 前端向渲染后端发出 API 请求时“不存在‘Access-Control-Allow-Origin’标头”，并且在我的本地主机中运行时面临同样的问题

cors已安装它的设置也很好

app.use(cors({
    origin: '*', 
    methods: 'GET,POST,PUT,DELETE', 
    credentials: true 
}));

我试过了

app.use(cors({
    origin: 'https://mern-kanban-app-omega.vercel.app', // Allow your frontend URL
    methods: 'GET,POST,PUT,DELETE', // Allow these HTTP methods
    credentials: true // Allow credentials (cookies, etc.) if needed
}));

仍然遇到问题

Access to fetch at 'https://mern-kanban-app.onrender.com/user/login' from origin 'https://mern-kanban-app-omega.vercel.app' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

app.use(cors({
    origin: '*', 
    methods: 'GET,POST,PUT,DELETE', 
    credentials: true 
}));

app.use(cors({
    origin: 'https://mern-kanban-app-omega.vercel.app', // Allow your frontend URL
    methods: 'GET,POST,PUT,DELETE', // Allow these HTTP methods
    credentials: true // Allow credentials (cookies, etc.) if needed
}));

Answer 1

下面的错误基本上是网络错误，浏览器返回给应用程序。这是在预检请求失败时返回的。

“访问‘https://mern-kanban-app.onrender.com/user/login’获取数据从来源“https://mern-kanban-app-omega.vercel.app”开始，... 禁用 CORS 的资源。”

预检请求是浏览器在原始请求之前发送的请求。此“特殊、额外和事先请求”仅在以下条件下发送。

safelist 一部分的标头或标头值。

预检请求本身是一个HTTP请求，因此它需要有一个与服务器通信的方法，因此

OPTIONS是用于进行预检请求的方法。两个请求标头 - Access-Control-Request-Method 和 Access-Control-Request-Headers 也包含在预检中。

服务器将发送

“特殊、额外和优先响应”作为预检响应。预检响应将在浏览器中进行两次单独的检查。

预检检查将测试响应中的两个标头 - Access-Control-Allow-Methods和Access-Control-Allow-Headers的值是否与请求中的相应值匹配。如果匹配，它将通过，否则它将失败并最终抛出网络错误，就像这个问题一样。

除了预检检查之外，

CORS 检查还将测试两个响应标头 - Access-Control-Allow-Origin 和 Access-Control-Allow-Credentials 是否设置正确。就像预检检查一样，此检查也可能会根据状态引发网络错误。

下面给出了 MRE。请详细查看随附的测试运行结果。请求，请使用此 MRE 检查您的原始代码以解决相应的问题（如果有）。

注： 下面中间件 cors 的默认配置也处理预检请求。但是，当请求包含凭据时，响应必须指定 origin 以及标头 Access-Control-Allow-Credentials 设置为 true。

{
  "origin": "*",
  "methods": "GET,HEAD,PUT,PATCH,POST,DELETE",
  "preflightContinue": false,
  "optionsSuccessStatus": 204
}

因此，此 MRE 中的 cors 已配置为假设包含凭据。

// Cors for this MRE assuming requests with credentials included 
app.use(
  cors({
    origin: 'http://127.0.0.1:5500',
    credentials: true,
  })
);

引用：

如何在 CORS 中获胜

服务器.js

const express = require('express');
const cors = require('cors');

const app = express();

app.use(
  cors({
    origin: 'http://127.0.0.1:5500',
    credentials: true,
  })
);

app.delete('/', (req, res) => {
  res.send('Preflight passed DELETE handler');
});

app.put('/', (req, res) => {
  res.send('Preflight passed PUT handler');
});

app.patch('/', (req, res) => {
  res.send('Preflight passed PATCH handler');
});

app.listen(3000, () => console.log('L@3000'));

index.html

<!DOCTYPE html>
<html>
  <head>
    Preflight tests
  </head>
  <body>
    <br />
    <p id="p1"></p>
    <p id="p2"></p>
    <p id="p3"></p>
  </body>
  <script>
    async function preflight() {
      const p1 = document.getElementById('p1');
      p1.textContent = await fetch('http://localhost:3000', {
        method: 'DELETE',
        credentials: 'include',
      }).then((response) => response.text().then((data) => data));

      const p2 = document.getElementById('p2');
      p2.textContent = await fetch('http://localhost:3000', {
        method: 'PUT',
        credentials: 'include',
      }).then((response) => response.text().then((data) => data));

      const p3 = document.getElementById('p3');
      p3.textContent = await fetch('http://localhost:3000', {
        method: 'PATCH',
        credentials: 'include',
      }).then((response) => response.text().then((data) => data));
    }
    preflight();
  </script>
</html>

试运行：

server : node server.js
client : index.html // open with Live Server / Visual Studio option

浏览器输出：

CORS 问题：从 Vercel 前端向渲染后端发出 API 请求时“不存在‘Access-Control-Allow-Origin’标头”

问题描述投票：0回答：1

1个回答

最新问题

CORS 问题：从 Vercel 前端向渲染后端发出 API 请求时“不存在‘Access-Control-Allow-Origin’标头”

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1