表示app.get（'/ *'）和api CORs问题

Question

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

server.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); 
    }) 
    } 

出于某种原因，这样我可以得到反应路由器来访问本地主机：3000 /仪表板只需输入查询URL字段罚款。它一直在返回html字符串。我可以改变什么，以便我可以接收json对象而不是html字符串？

Answer 1

你有cors问题，因为你试图从这个URL http://localhost:3000/api检索数据，这是很正常的。问题是，如果你从另一台服务器提供你的应用程序（让我们假设Apache为80端口），那么你也有问题是很正常的。绕过这个

的一种方法是通过注册的所有路由前登录中间件：

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已经到位，我会建议研究一下。

编辑

顺便说一句，如果你为你的API和只替换一个反应从同一个节点服务器应用，那么：这一个

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

：

axios.get('/api') 

应该工作

Answer 2

你需要切换路径声明的顺序：

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

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

这是因为/*将也比赛/api和Express不匹配，在此基础上路由匹配最好，但其路径相符第一个。

始终在不太具体的路线之前申报更具体的路线。