Javascript “错误”；否'；访问控制允许原点'；标题出现在请求的资源上；即使在服务器和客户端上设置了头

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

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

我调用函数save并继续提交表单

下面是实现此目的的代码段：

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();
}

此外，我还将访问控制允许源添加到nodeJS服务器响应头中

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"});       
    }
 })
}

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

加载失败：对飞行前请求的响应未通过访问控制检查：请求的资源上不存在“访问控制允许来源”标头。因此，不允许访问源“”。如果不透明响应满足您的需要，请将请求的模式设置为“no cors”，以获取禁用cors的资源

非常感谢您的帮助！！我想我已经做了类似问题所推荐的一切。甚至Safari也会抛出以下错误：

[错误]加载资源失败：访问控制不允许源站允许源站。（408661，第0行）

[错误]无法加载获取API。访问控制不允许原点允许原点

---

非常感谢

尝试将这些中间件添加到您的应用程序中

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

// Website you wish to allow to connect
res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8888');

// Request methods you wish to allow
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');

// Request headers you wish to allow
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');

// Set to true if you need the website to include cookies in the requests sent
// to the API (e.g. in case you use sessions)
res.setHeader('Access-Control-Allow-Credentials', true);

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

---

}))

尝试将这些中间件添加到您的应用程序中

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

// Website you wish to allow to connect
res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8888');

// Request methods you wish to allow
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');

// Request headers you wish to allow
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');

// Set to true if you need the website to include cookies in the requests sent
// to the API (e.g. in case you use sessions)
res.setHeader('Access-Control-Allow-Credentials', true);

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

---

}))

安装

cors

您将不会遇到任何问题

const cors=require（'cors'）；应用程序使用（cors（））npm上的链接安装
cors
，您将不会遇到任何问题
const cors=require（'cors'）；应用程序使用（cors（））npm上的链接
可能重复的可能重复的可能重复的是否在服务器端？是否在服务器端？是否在服务器端？是否在服务器端？是否尝试将其添加到后端：）是否在服务器端？是否尝试将其添加到后端：）