Question

我正在从在端口3000上运行的反应应用程序到在端口8080上运行的节点api进行api调用。我收到错误：

XMLHttpRequest无法加载http://localhost:8080/register。对预检请求的响应没有通过访问控制检查：否＆＃39;访问控制 - 允许 - 来源＆＃39;标头出现在请求的资源上。起源＆＃39; http://localhost:3000＆＃39;因此不允许访问。

我的反应api电话是：

export const addUser=(data) =>{
console.log(data);
return function(dispatch,data){
axios.post('http://localhost:8080/register',{
    phone:data.phone,
    password:data.password,
    first_name:data.fname,
    last_name:data.lname,
    dob:data.dob,
    gender:data.gender
})
.then(response =>{
  console.log('data submitted successfully');
  dispatch({
    type : AddUser,
    User : data
  })
}).catch(err =>{
  console.log(err);
})
}
}

我的服务器端代码在node.js中，我将标题包含在：

app.use(function(req, res, next) {
res.header('Access-Control-Allow-Origin', "*");
res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
res.header('Access-Control-Allow-Headers', 'Content-Type');
next();
});

我仍然无法将数据发布到我的数据库中。任何建议都会对我有所帮助。感谢。

Answer 1

选项1：

npm install cors


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

选项2： 或者使用setHeader方法而不是仅使用标题

app.use(function (req, res, next) {


    res.setHeader('Access-Control-Allow-Origin', '*');


    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');

    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');

    res.setHeader('Access-Control-Allow-Credentials', true);

    // Pass to next layer of middleware
    next();
});

无法通过react app进行节点api调用

1 个答案: