reactjs 如何修复从本地React应用连接到本地Appwrite时localhost上的CORS错误?

z9smfwbn  于 2023-06-29  发布在  React
关注(0)|答案(1)|浏览(116)

我在一个React应用程序中使用Web SDK for Appwrite:

const client = new Client()
    .setEndpoint(import.meta.env.URL)
    .setProject(import.meta.env.PROJECT_ID)

  const account = new Account(client);

  const promise = account.create(ID.unique(),
    "some@email.com",
    "somepassword");

  promise.then(
    function (response: any) {
      console.log(response);
    },
    function (error: any) {
      console.log(error);
    }
  );

在AppwriteGUI中,我配置了一个带有localhost域的WebApp平台。我的React应用可以在本地主机上运行。

  • 端点名称和项目名称与Appwrite Jmeter 板中的数据匹配。
  • 应用程序在http上启动,API也在http上设置。
  • 我已经指出localhost是API调用的来源
  • 该应用程序位于http://localhost:5173/下,API位于http://localhost:8455上。

在控制台中,我得到一个错误:

POST http://localhost:8455/account net::ERR_FAILED 404 (Not Found)
Access to XMLHttpRequest at 'http://localhost:8455/account' from origin 'http://localhost:5173'
has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.

如何修正这个错误?

w6lpcovy

w6lpcovy1#

首先,你必须在你的后端文件夹中安装cors包:

npm install cors

然后你需要将变量设置为:

var cors = require('cors')
app.use(cors())

那么你可能就不会面对这个问题。这可能对你有帮助

相关问题