从反应应用程序获取到本地主机快速服务器的cors错误[重复]

Posted 2023-02-27

【中文标题】从反应应用程序获取到本地主机快速服务器的cors错误[重复]

【英文标题】：cors error fetching from react app to localhost express server [duplicate]

【发布时间】：2019-07-30 00:18:58

【问题描述】：

我的 react 应用在 localhost:3000 上运行

我的 express 服务器在 localhost:1234 上运行

这是我的快递服务器：

const express = require("express")
const cors = require("cors")
const app = express();
const PORT = 1234;
const spawn = require("child_process").spawn;

app.use(cors())

app.listen(PORT,  function()
console.log(`listening on port:$PORT...`)
)

app.get("/api/play/:choice", function(req,res)
    res.status(200).send("lets go")
    /*pythonProcess = spawn('python',["./script.py", req.params.choice]);
    pythonProcess.stdout.on('data', function(data) 
    res.status(200).send(data.toString('utf-8')))*/
)

我有一个这样的反应应用程序获取

fetch(`localhost:1234/api/play/$this.state.value`)
.then(function(res) 
  res.text().then(function(text)
    console.log(text)
  );
)

我在反应服务器的控制台中收到此错误：

Fetch API cannot load localhost:1234/api/play/rock. URL scheme must be "http" or "https" for CORS request.

当我使用邮递员时，我使用邮递员时，我会得到正确的响应：

http://localhost:1234/api/play/whatever

【参考方案1】：

在您的 .env 文件中（如果有）（根目录）

API_URL = http://localhost:1234

并使用它

const HOSTNAME = process.env.PFPLUS_API_URL;
fetch(`$HOSTNAME/api/play/$this.state.value`)
.then(function(res) 
  res.text().then(function(text)
    console.log(text)
  );
)

如果你不通过 env 文件方式就使用这种方式

fetch(`http://localhost:1234/api/play/$this.state.value`)

如果显示新的 cors 错误，请在您的 express 服务器文件上使用此代码

app.all('*', function(req, res, next) 
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Credentials', 'true');
  res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
  res.header(
    'Access-Control-Allow-Headers',
    'Origin, X-Requested-With, Content-Type, Accept, Authorization'
  );
  next();
);