Question

我正在使用Angular作为我的前端，而Express正在使用后端。我遇到了一个CORS问题，其中有几个api端点的一个，它们的配置相似：

无法加载http://localhost:3000/api/deletePost：请求的资源上没有“Access-Control-Allow-Origin”标头。因此，不允许原点“http://localhost:4200”访问。响应的HTTP状态代码为400。

任何帮助将不胜感激。谢谢。

前端代码（web-calls.service.ts）：

// Not working

deleteArticle(articleId:string): Observable<any> {
  return this.http.post('http://localhost:3000/api/deletePost', JSON.stringify(articleId), {
    headers: new HttpHeaders().set('Content-Type', 'application/json'),
  }).map(data => {
    if (data["status"] == 200) {
      this.router.navigate(['posts']);
    } else if (data["status"] == 500) {
      // TODO: error message and handling here
      console.log(data);
    }
    return data["status"];
  });
}


// working

createOrUpdatePost(url, articleComplete): Observable<number> {
  return this.http.post('http://localhost:3000/api/updatePost', JSON.stringify(articleComplete), {
    headers: new HttpHeaders().set('Content-Type', 'application/json'),
  }).map(data => {
    if (data["status"] == 200) {
      this.router.navigate(['post' + '/' + data["response"]]);
    } else if (data["status"] == 500) {
      // TODO: error message and handling here
      console.log(data);
    }
    return data["status"];
  });
}

后端代码（app.js）：

app.all('/*', function(req, res, next) {
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
    res.header('Access-Control-Allow-Headers', 'authorization,Content-Type, X-Requested-With');
    res.header('Access-Control-Allow-Origin', '*');
    next();
});

app.use('/api', api);

还尝试了app.js的配置：

function setupCORS(req, res, next) {
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
    res.header('Access-Control-Allow-Headers', 'authorization,Content-Type');
    res.header('Access-Control-Allow-Origin', '*');
    console.log("METHOD: " + req.method);
    if (req.method === 'OPTIONS') {
        console.log('OPTIONS >>>');
        res.status(200).end();
    } else {
        console.log('NOT OPTIONS >>>');
        next();
    }
}
app.all('/*', setupCORS);

后端代码（api.js）：

router.post('/deletePost', function (req, res, next) {
    console.log('here here'); // does not print to console
    // other code here
}

router.post('/updatePost', function (req, res, next) {
    console.log('here here'); // prints just fine
    // other code here
}

Answer 1

一旦遇到类似的问题，我记得通过添加此标题来解决问题：Access-Control-Allow-Credentials: true 也许这会对你有帮助。

顺便说一句，我建议你在发送数据之前不要使用JSON.stringify()。

<强>更新

您还可以使用curl调试CORS，如此问题How can you debug a CORS request with cURL?

中所述

Answer 2

显然，ValueError: The truth value of an array with more than one element is ambiguous. Use a.any() or a.all()并不意味着数据类型被正确发送为json字符串。

相反，使用JSON.stringify('string')可以。

获得的经验：如果数据格式不正确，浏览器控制台上显示的CORS错误无效。

应该是什么：

JSON.stringify(object)

Answer 3

您可能希望使用代理来缓解本地服务器上的CORS，这是在本地开发时处理CORS的更好方法。要在角度应用程序上设置代理，请创建新文件proxy.config。将项目文件夹中的json与package.json一起添加到其中：

{
 "/localapi/*": {
"target": "http://localhost:4646",
"pathRewrite": {
  "^/localapi": ""
},   
"changeOrigin": true,
"secure": false,
"logLevel": "debug"
  }
}

添加您当地的api地址，例如“mydomain / api /＆＃39;以便具有此URL的所有请求将通过代理发送。接下来修改你的package.json并更改＆＃34; start＆＃34;的值。

"start": "ng serve --proxy-config proxy.config.json"

现在启动您的应用程序使用上述命令而不是ng服务，您不会遇到任何CORS问题，无需手动为服务器上的每个请求添加自定义标头。

CORS问题（Express后端，Angular前端）

3 个答案: