cors从react应用程序提取到localhost express服务器时出错[重复]

Question

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

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}`)

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