Cors 错误 - 尝试向服务器发出 POST 请求时出现 ngrok & express & axios 问题答案

【问题标题】：Cors error - ngrok & express & axios issue when trying to make POST request to the serverCors 错误 - 尝试向服务器发出 POST 请求时出现 ngrok & express & axios 问题
【发布时间】：2022-11-17 20:44:27
【问题描述】：

我在尝试向服务器发出 POST 请求时遇到问题。前端和后端都是 ngrok 托管。

这是 POST 请求：

  export async function createTest(test: any) {
      try {
        const res = await axios.post(
          `${backendDomain}/test`,
           {id: test, name: 'test'},
          {
            headers: {
              'Access-Control-Allow-Origin': '*',
              'Content-Type': 'application/json',
              'Access-Control-Allow-Methods': 'POST',
            },
          }
        )
        const newTest = res.data
        return newTest 
      } catch (error) {
        console.log(error)
      }
    }

这是后端域：https://sd21-23-221-223-216.ngrok.io

后端：

const corsOptions = {
  origin: "https://dz23-12-256-124-663.eu.ngrok.io",
  methods: ['GET', 'PUT', 'POST', 'HEAD', 'DELETE', 'OPTIONS'],
  allowedHeaders: ['Content-Type', 'Authorization', 'Origin', 'Access-Control-Allow-Origin'],
  credentials: true,
}
app.use(cors(corsOptions))

错误：

Access to XMLHttpRequest at 'https://sd21-23-221-223-216.ngrok.io/test' from origin 'https://dz23-12-256-124-663.eu.ngrok.io' has been blocked by CORS policy:

预检响应中的 Access-Control-Allow-Headers 不允许请求标头字段 access-control-allow-methods。

更奇怪的是，我也有 GET 请求，有时有效，有时无效。

有任何想法吗？

【问题讨论】：

标签： express axios cors ngrok

【解决方案1】：

您需要添加此标头参数ngrok 跳过浏览器警告具有任何价值

例子：

$.ajax({
        url: 'https://5120-143-202-253-244.eu.ngrok.io/api',
        type: 'GET',
        headers: {
            "ngrok-skip-browser-warning":"any"
        },
        success: function (data) {
            console.log(data);
        }
    });

【讨论】：