错误“即使在服务器和客户端上设置了标头，请求的资源上也没有'Access-Control-Allow-Origin'标头”

Question

我在端口8002上运行了一个NodeJS/Express后端API服务器，在端口3000上运行了一个ReactJS前端应用程序。

我从reactJS前端应用程序提交了一个表单，以发布在API服务器上，该服务器将它保存到数据库中。

我调用一个函数saveAndContinue来提交表单。

下面是这样做的片段：

class Confirmation extends Component{
saveAndContinue = (e) => {
    e.preventDefault();

    console.log("props : " + JSON.stringify(this.props.values));
    var form_id = Math.floor(Math.random() * 1000000); 
    let headers = new Headers();

      headers.append('Content-Type', 'application/json');
      headers.append('Accept', 'application/json');

      headers.append('Access-Control-Allow-Origin', '*');

    fetch("http://localhost:8002/sharepoint/big_data_poc/" + form_id,{
        method:'POST',
        //mode: 'cors',
        body:JSON.stringify(this.props.values),
        headers: headers
    }).then(res => res.json()).then(this.setState({confirmation_id:form_id}))
    .then(response => console.log('Success:', JSON.stringify(response)))
    .catch(error => console.error('Error:', error));
    this.props.nextStep();
}

另外，我在nodeJShtml" target="_blank">服务器响应头中添加了access-control-allog-orgin

cb_service.prototype.addForm = function(req,res,form_id, doc_type,payload){
logger.info(JSON.stringify(payload));
bucket.upsert(form_id,payload,function(err,result){
    if(err){
        logger.error("error inserting data in couchbase")
    }
    else {
        res.setHeader('Access-Control-Allow-Origin','*')
        res.setHeader('Access-Control-Allow-Methods','POST, GET, OPTIONS, PUT')
        res.setHeader('mode','cors')
        logger.info("successful inserts");
        res.status(200);

        return res.json({"success":"ok"});       
    }
 })
}

我根本没有看到任何请求进入服务器。我只是在浏览器控制台中看到以下错误：

未能加载http://localhost:8002/sharepoint/big_data_poc/944960:对飞行前请求的响应未通过访问控制检查：请求的资源上没有“access-control-allog-origin”标头。因此，不允许访问源'http://localhost:3000'。如果一个不透明的响应满足您的需要，请将请求的模式设置为“no-cors”，以便在禁用CORS的情况下获取资源。

任何帮助都是非常感谢的！！我想我已经做了SO上类似问题推荐的所有事情。甚至Safari也会抛出以下错误：

[错误]未能加载资源：来源http://localhost:3000不被Access-Control-Allog-Origin允许。(408661，第0行）

[错误]获取API无法加载http://localhost:8002/sharepoint/big_data_poc/408661.Access-Control-Allog-Origin不允许Origin http://localhost:3000。

太感谢了！

Answer 1

安装cors就不会有任何问题const cors=require('cors')；app.use（cors（））；npm https://www.npmjs.com/package/cors上的链接