Question

我的React应用在localhost：3000上运行

我的快递服务器在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'))})*/
})

我有一个这样的React应用程序

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

Answer 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错误，则在快递服务器文件上使用此代码

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();
});

从React App到localhost Express服务器获取cors错误

1 个答案: