如何解决“对预检请求的响应未通过访问控制检查：它没有HTTP正常状态”使用Node.js API的React App中出现错误 [英] How to fix "Response to preflight request doesn't pass access control check: It does not have HTTP ok status" error in react app with nodejs api

问题描述

我一直在尝试通过本地开发服务器（Web-pack开发服务器）上的浏览器中运行的React应用程序进行api调用（在本地主机上运行带有nodejs的express的js）。一切运行良好，直到我尝试调用该api。它们都在单独的端口上运行。

I have been trying to do an api call (nodejs with express running on localhost) from a react app running in the browser over a local dev server (web-pack dev server). Everything was working well until I tried to call the api. They are both running on separate ports.

我尝试将cors标头（由MDN推荐）添加到post调用（来自浏览器中的应用）和

I have tried adding the cors headers (Recommended by MDN) to both the post call (from the app in browser) and to the response from the Nodejs API but neither of these solved the issue.

api调用代码（在浏览器中）：

Code for the api call (in browser):

const headers = {
  'Content-Type': 'application/json',
  'access-token': '',
  'Access-Control-Allow-Origin': '*',
}

export default async () => {
  try {
    const body = JSON.stringify({
      test: true,
    })
    const response = await fetch('http://localhost:1337/internal/provider/check_email_exist', {
      method: 'POST',
      headers,
      body,
    })
    console.log(response)
  } catch (e) {
    return e
  }
}

API中间件（在nodejs中）：

API Middleware (in nodejs):

// Verify All Requests
app.use(VerifyToken)

// Compress
app.use(compression())

// Helmet middlware
app.use(helmet())

// Body Parser
app.use(bodyParser.urlencoded({
  extended: false,
}))
app.use(bodyParser.json())

预期结果是给出200个状态码并响应数据。

The expected result is to just give a 200 status code and respond with the data.

实际输出为：

OPTIONS http://localhost:1337/internal/provider/check_email_exist 404 (Not Found)

Access to fetch at 'http://localhost:1337/internal/provider/check_email_exist' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

推荐答案

由于您使用的是 webpack-dev-server ，您可以使用 proxy 选项 DevServerProxy 。

Since you're using webpack-dev-server you can use the proxy option DevServerProxy.

您的配置将如下所示：

// webpack.config.js
devServer: {
    proxy: {
      '/internal': 'http://localhost:1337'
    }
  }

因为我看不到您的 express 关于您的问题的路由如果您的 API 生活在 / internal上，我正在猜测代理路由端点，那么您应该像这样修改React代码：

Since I can't see your express routes on your question I'm speculating about the proxy route if your API lives on /internal endpoint then you should modify your React code like this:

const response = await fetch('/internal/provider/check_email_exist', {
   method: 'POST',
   headers,
   body,
})

如您所见，我省略了 https：// localhost：1337 导致 webpack-dev-server 中的 proxy 选项将处理此问题，并将重定向到 http：// localhost：1337 。希望这会帮助你。欢呼，笑起来。

As you can see I ommited the https://localhost:1337 because the proxy option from webpack-dev-server will handle this and it will redirect to http://localhost:1337. Hope this will help you. Cheers, sigfried.

编辑

对您的问题的评论指出您应该在 express 服务器而不是客户端上设置标头，对于此任务，您可以使用 cors-middleware 包。

As the comment on your question pointed out you should set the headers on your express server, not the client, for this task you can use the cors-middleware package.

这篇关于如何解决“对预检请求的响应未通过访问控制检查：它没有HTTP正常状态”使用Node.js API的React App中出现错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！