javascript - express app.get ('/* ' ) 和 api CORs 问题

Question

你能告诉我如何获得我的 json api 吗？

服务器.js

app.get('/*', function(req, res) {
    res.sendFile(path.join(__dirname, 'public', 'index.html'));
})

app.get('/api', function(req, res) {
    res.header()
res.json({'message' : 'hi this is my json obj'});
})

App.js

class App extends React.Component {
    componentDidMount() {
    // let foo;
    axios.get('http://localhost:3000/api')
        .then(res => {
        console.log(res.data);
        res.data.message;
    })
    .catch(err => {
        console.log(err);
    })
  }

出于某种原因，我可以通过输入 url 字段让 React 路由器访问 localhost:3000/dashboard 就好了。它不断返回 html 字符串。我可以更改什么以使其接收 json 对象而不是 html 字符串？

Answer 1

您有 cors 问题，因为您正试图从此 url http://localhost:3000/api 检索数据这是很正常的。问题是，如果您从另一台服务器提供您的应用程序(假设 apache 端口为 80)，那么您也有 cors 问题是正常的。

绕过这个的一种方法是在注册所有路由之前注册一个中间件:

app.use(function (req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

app.get('/*', function (req, res) {
  res.sendFile(path.join(__dirname, 'public', 'index.html'));
})

app.get('/api', function (req, res) {
  res.header()
  res.json({ 'message': 'hi this is my json obj' });
})

您可以使用 cors 模块并像这样注册它，而不是创建自己的中间件:

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

注意做这样的事情:

res.header("Access-Control-Allow-Origin", "*");

对您的服务器来说可能有点危险，因为其他应用程序可以直接从浏览器使用您的 api 而不会出现问题。 cors 到位是有原因的，我建议对其进行研究。

编辑

顺便说一下，如果你从同一个 Node 服务器提供你的 api 和你的 react 应用程序，那么只需替换这个:

axios.get('http://localhost:3000/api')

用这个:

axios.get('/api')

应该可以