如何使用 express 启用 cors nodejs？

Question

总而言之，我正在使用一个名为基石的 dicom 文件 api 之类的查看器，为此我连接到 dc4chee 的 WADO 服务以获取 dicom，dcm4chee 运行端口 8080，而我在节点上的应用程序使用端口 3000，所以我试图显示浏览器的 dicom。

https://www.npmjs.com/package/cornerstone-wado-image-loader

这是浏览器显示的错误

XMLHttpRequest can not load http: // localhost: 8080 / wado? RequestType = WADO & studyUID = 1.2.840.113704.1.111.5 ... 26513.429 & contentType = application% 2Fdicom & transferSyntax = 1.2.840.10008.1.2. In 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http: // localhost: 3000' is therefore not allowed access.

在指定的文档中

请注意，网络服务器必须支持跨源资源共享，否则图片将无法加载。如果您无法在要从中加载 DICOM P10 实例的 Web 服务器上启用 CORS，则可以使用反向代理。这是一个基于 http-proxy 的简单 Node.js，它添加​​了您可能会发现有用的 CORS 标头。

并显示此示例代码，但我使用的是 express 并且此代码不起作用

Var http = require ('http'),
    HttpProxy = require ('http-proxy');

Var proxy = httpProxy.createProxyServer ({target: 'http: // localhost: 8042'}) .listen (8000);

Proxy.on ('proxyRes', function (proxyReq, req, res, options) {
  // add the CORS header to the response
  Res.setHeader ('Access-Control-Allow-Origin', '*');
});

Proxy.on ('error', function (e) {
  // suppress errors
});

这里的代码也使用 npm cors

Var express = require ('express')
Var cors = require ('cors')
Var app = express ()
 
App.get ('/ products /: id', cors (), function (req, res, next) {
  Res.json ({msg: 'This is CORS-enabled for a Single Route'))
})
 
App.listen (80, function () {
  Console.log ('CORS-enabled web server listening on port 80')
})

但是有了这个，我在端口 3000 而不是 8080 上启用了 cors，我需要在标头响应中而不是在标头请求中激活或添加“Access-Control-Allow-Origin”的模式，

如何在 dcm4chee 从 NODEjs 运行的端口 8080 上添加 CORS？

更新！

服务器响应如下；

响应标题

Content-Type:application/dicom
Date:Sat, 01 Apr 2017 01:15:38 GMT
Expires:0
Server:Apache-Coyote/1.1
Transfer-Encoding:chunked
X-Powered-By:Servlet 2.4; JBoss-4.2.3.GA (build: SVNTag=JBoss_4_2_3_GA 
date=200807181439)/JBossWeb-2.0

请求标头

Accept:*/*
Accept-Encoding:gzip, deflate, sdch, br
Accept-Language:es-ES,es;q=0.8,en-US;q=0.6,en;q=0.4
Connection:keep-alive
Host:localhost:8080
Origin:http: //localhost:3000
Referer:http: //localhost:3000/
User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like 
Gecko) Chrome/55.0.2883.87 Safari/537.36

如何在响应头中启用 CORS？？

Answer 1

要启用 cors，您可以这样做：

var cors = require('cors');
app.use(cors());
// to change your ports for different cors stuff:
app.set('port', process.env.PORT || 3000);
app.listen(app.get('port'), function() { 
  console.log('we are listening on: ', 
  app.get('port'))
});

请记住，cors 是中间件，因此您需要在其前面加上 app.use，以便您的传入请求在到达您的路由之前通过 cors。

您可以根据要使用的端口更改端口。我很确定您也可以将|| 替换为&& 以侦听多个端口并在这些端口上设置cors。

在原始节点中，我相信您必须使用 writeHead，但我不确定原始节点的实现。

Answer 2

浏览器显示的错误表示，服务器 localhost:8080 拒绝了来自 localhost:3000 的请求，似乎 cors 在服务器 localhost:8080 上没有设置好。

响应头应该是这样的：

Access-Control-Allow-Headers:Content-Type,Content-Length, Authorization, Accept,X-Requested-With
Access-Control-Allow-Methods:PUT,POST,GET,DELETE,OPTIONS
Access-Control-Allow-Origin:*

尝试在您的 8080 服务器中添加 cors 标头。

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

Answer 3

做

npm install cors --save

只需将这些行添加到您的请求所在的主文件中即可。

const cors = require('cors');
const express = require('express');
const app = express();
app.use(cors());
app.options('*', cors());

Answer 4

添加 CORS(Cross-Origin-Resource-Sharing) 到你的节点，express 应用非常简单...

您需要先通过 npm 安装 cors 库，使用以下命令：

npm install cors -S

如果您需要它全局，只需添加-g 标志...

然后在您的 express 应用中，执行以下操作：

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

这些也是他们文档中的 cors 的其他示例：

var express = require('express')
var cors = require('cors')
var app = express()

app.use(cors())

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

app.listen(80, function () {
  console.log('CORS-enabled web server listening on port 80')
})

异步配置 CORS：

var express = require('express')
var cors = require('cors')
var app = express()

var whitelist = ['http://example1.com', 'http://example2.com']
var corsOptionsDelegate = function (req, callback) {
  var corsOptions;
  if (whitelist.indexOf(req.header('Origin')) !== -1) {
    corsOptions = { origin: true } // reflect (enable) the requested origin in the CORS response
  }else{
    corsOptions = { origin: false } // disable CORS for this request
  }
  callback(null, corsOptions) // callback expects two parameters: error and options
}

app.get('/products/:id', cors(corsOptionsDelegate), function (req, res, next) {
  res.json({msg: 'This is CORS-enabled for a whitelisted domain.'})
})

app.listen(80, function () {
  console.log('CORS-enabled web server listening on port 80')
})

Answer 5

此代码帮助我解决了 express 的资源 cors 问题。并且您可以通过异步源配置轻松使用其他选项。

var cors = require('cors'); //import cors module

var whitelist = ['http://localhost:8000', 'http://localhost:8080']; //white list consumers
var corsOptions = {
  origin: function (origin, callback) {
    if (whitelist.indexOf(origin) !== -1) {
      callback(null, true);
    } else {
      callback(null, false);
    }
  },
  methods: ['GET', 'PUT', 'POST', 'DELETE', 'OPTIONS'],
  optionsSuccessStatus: 200, // some legacy browsers (IE11, various SmartTVs) choke on 204
  credentials: true, //Credentials are cookies, authorization headers or TLS client certificates.
  allowedHeaders: ['Content-Type', 'Authorization', 'X-Requested-With', 'device-remember-token', 'Access-Control-Allow-Origin', 'Origin', 'Accept']
};

app.use(cors(corsOptions)); //adding cors middleware to the express with above configurations

Answer 6

//Définition des CORS Middleware 
app.use(function(req, res, next) {
    res.setHeader("Access-Control-Allow-Headers", "X-Requested-With,content-type, Accept,Authorization,Origin");
    res.setHeader("Access-Control-Allow-Origin", "*");
    res.setHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS, PUT, PATCH, DELETE");
    res.setHeader("Access-Control-Allow-Credentials", true);
    next();
  });`enter code here`

Answer 7

要解决这个问题，首先你必须了解 Access-Control-Allow-Origin：这个 Header 的值将是你向服务器发送请求的主机（例如快递）。

第1步：在服务器端允许cors，（要允许跨源请求，您可以使用*代替http://localhost:3000：

var express = require("express");
var app = express();
 
 
app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*"); // update to match the domain you will make the request from
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
});

第 2 步：使用你的 http 客户端，我使用的是 Axios：

var qs = require("querystring");
var axios = require("axios");
const sendEmail = (email, subject, template) => {

    var data = qs.stringify({
        email: email,
        subject: subject,
        template: template,
    });
    var config = {
        method: "post",
        url: "https://abc-domain.com/endpoint",
        headers: {
            "Content-Type": "application/x-www-form-urlencoded",
        },
        data: data,
    };

    axios(config)
        .then(function(response) {
            console.log(JSON.stringify(response.data));
        })
        .catch(function(error) {
            console.log(error);
        });
};

module.exports = sendEmail;

Answer 8

CORS 在我添加 http:// 以请求 url 之前无法在 localhost 上运行

不工作localhost:3001

工作正常http://localhost:3001

这是我的工作代码最后的样子

节点端

var cors = require('cors')
const app = express();
app.use(cors()); // Make sure this line comes right after express()

前端

let response = await axios.post("http://localhost:3001/uploadFile", formData); 
// the http:// is required cors to work for localhost

Answer 9

在您的路由处理程序中添加以下内容

res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");

例如，而不是这个

app.get("/monsters", (req, res) => {
  const arr = [
    {
      name: "Abanoub",
      id: "215",
    },
    {
      name: "Mena",
      id: "sd5",
    }
    
  ];

  res.send(arr);
});

使用我之前提到的标题。 所以路由处理程序将是这样的：

app.get("/monsters", (req, res) => {
  const arr = [
    {
      name: "Abanoub",
      id: "215",
    },
    {
      name: "Mena",
      id: "sd5",
    }
  ];

  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "X-Requested-With");

  res.send(arr);
});

Answer 10

我也遇到了这个问题。 为了解决这个问题，我使用了 CORS 模块并将其导入到我的路由中：

import cors from 'cors';
const router = new Router();
router.get('/posts', cors(), PostController.getAll);