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

Question

我在尝试向服务器发出 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 请求，有时有效，有时无效。

有任何想法吗？

Answer 1

您需要添加ngrok-skip-browser-warning具有任意值的此标头参数

例子：

$.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);
  }
});