Question

我正在开发一个有联系页面的反应网站。在联系页面上有一个文本字段，您可以在其中输入将发送到特定电子邮件地址的消息。

现在我只是尝试使用我的反应应用程序设置快递，我需要快速的仅这是一个功能。

在我的反应应用中，我正在做

$.post('http://localhost:3030/API',{value:'hi'}, function(result) {
  console.log(result);
});

在我正在执行的Express index.js文件中

app.get('/API', (request, response) => {  
  console.log(request);
})

就像一个简单的测试，看看事情是否正常运作。

当我同时运行这两个并尝试执行我的post函数时，我收到No 'Access-Control-Allow-Origin' header is present on the requested resource.错误，这基本上就是说我can't make a request to a separate domain。这里的问题不是那个错误，而是我运行我的Express服务器并在两个不同的服务器上做出反应的事实。

有没有办法让它们在同一台服务器上？我对后端开发很新，任何帮助都会非常感激！

Answer 1

是的，React在客户端运行，Express是Node.js框架。如果您正在运行任何样板，那么您很有可能使用Express。

这是一个关于更完整路由的非常好的演练。 https://medium.com/@patriciolpezjuri/using-create-react-app-with-react-router-express-js-8fa658bf892d

在我的几个应用程序中，我的路线看起来像这样：

//router.js--and I'm positive this is from some react-express boilerplate
var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

const react =  (req, res, next)=>{
  res.render('react', { 
    title: 'React Application',
    layout: false
  });
};

router.get('/app', react);
router.get('/app*', react);
module.exports = router;

//app.js
...
app.use('/', routes); //<--this is the exported router. 
...

如果你想变得更简单，可能就像：

   let reactRoute = (request, response, next) => {
     //render your react page however you're doing that. 
   }
   express.use('/API', yourApiFunction)
   express.use('/', reactRoute)
   express.use('/*', reactRoute) //Wildcards are REALLY important if you're routing inside react.

您也可以使用代理绕过一些东西，但这往往比您想要的更复杂。另外 - 请记住，如果您对此不熟悉，则不必坚持使用后端的Node。 React是客户端，我使用一些生产.NET应用程序，一些PHP（lordy！），以及很多Node服务器。

Answer 2

解决No 'Access-Control-Allow-Origin' header is present on the requested resource. 你必须使用 cors 中间件

转到术语 yarn add cors 或 npm i cors

在server.js

const cors = require("cors");
const express = require("express");
const app = express();

app.use(cors());

主机React和Express在同一台服务器上？

2 个答案: