Angular客户端启用CORS

Question

CORS在服务器上运行良好，并按预期工作。我尝试用angular HTTPClient向服务器的RESTAPI发送请求，但收到一个CORS错误。如果服务器上启用了CORS，为什么会出现此错误？这对客户来说不是很好吗？

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:3000/api/blah/blah (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

Answer 1

跨源资源共享（也称CORS）是一种机制，它使用额外的HTTP头通知浏览器提供在一个源运行的web应用程序（例如http://localhost:3000），从不同来源（例如http://localhost:8080）。换句话说，web应用程序从其自身请求具有不同来源（域、协议或端口）的资源时，会执行跨来源HTTP请求。出于安全原因，浏览器限制从脚本启动的跨源HTTP请求。

Access Control Allow Origin标题确定允许哪些来源通过CORS访问服务器资源。

如何解决CORS问题？

您可以通过创建Express中间件自己完成。以下是相应的代码片段：

// Enable CORS for specific origins:


app.use((req, res, next) => {
  // Allow multiple predefined origins
  const allowedOrigins = ["https://deployed-app.com", "http://localhost:3000"];
  const origin = req.headers.origin; // extract the origin from the header
  if (allowedOrigins.indexOf(origin) > -1) { // if the origin is present in our array   
    res.setHeader("Access-Control-Allow-Origin", origin); // set the CORS header on the response
  }
  res.header(
    "Access-Control-Allow-Headers",
    "Origin, X-Requested-With, Content-Type, Accept"
  );
  next(); // move on to the next middleware
});

或者，您可以接受所有请求，但此选项仅适用于您正在开发或您的API是公共的情况：）

 app.use((req, res, next) => {
    res.header("Access-Control-Allow-Origin", "*");
    next();
 });

此外，还有一个ExpressCORS中间件，您将如何使用它：

npm安装cors

启用所有CORS请求：

    const express = require('express');
    const cors = require('cors');
    const app = express();

    app.use(cors());

    app.get('/products/:id', function (req, res, next) {
      res.json({msg: 'This is CORS-enabled for all origins!'})
    });

    const port = process.env.PORT || 8080;

    app.listen(port, () => {
     console.log(`CORS-enabled server is up on ${port}`);
   });

为单个路由启用CORS

const express = require('express');
const cors = require('cors');
const app = express();

    app.get('/products/:id', cors(), (req, res, next) => {
      res.json({msg: 'This is CORS-enabled for a Single Route'})
    });

     const port = process.env.PORT || 8080;

       app.listen(port, () => {
         console.log(`CORS-enabled server is up on ${port}`);
       });

要点：说到快速中间件，顺序非常重要。因此，确保CORS在任何其他可能依赖它的控制器/路由/中间件之前启用。

Answer 2

您不需要在angular中启用cors，这是服务器端的问题。见：

https://stackoverflow.com/a/29548846/4461537

Answer 3

对于未来的参考，是“戴维斯”的回答帮助了我，cors并没有在所有路由之前添加。

“…意思是，在定义路线之前。”所以在。。。var-app=express（）；

我只是用。。。应用程序使用（cors（））；