Question

我的快速服务器在http://localhost:3000上运行（我称之为网络服务器）我在localhost上运行了另一个应用程序：8100（我称之为＆＃39; app＆＃39;）

当我的应用程序拨打网络服务器时，我会收到以下消息：

"XMLHTTPReqeust cannot load http://localhost:3000/auth/facebook. Response to preflight request doesn't pass access control check. A wildcard '*' cannot be used in the 'Access-Control-Allow-Origin' when the credentials flag is true. Origin 'http://localhost:81000' is therefore not allowed acecss"

此消息显示在浏览器控制台中。

我在节点webserver的中间件中设置了以下选项

res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Methods', 'GET,PUT, POST,DELETE');

在阅读了几个stackoverfow问题后，我还添加了以下内容：

 res.header('Access-Control-Allow-Origin', 'http://localhost:8100');

然而，这并不能解决问题。

Answer 1

我个人更喜欢cors模块。代码非常简单：

var whitelist = [
    'http://0.0.0.0:3000',
];
var corsOptions = {
    origin: function(origin, callback){
        var originIsWhitelisted = whitelist.indexOf(origin) !== -1;
        callback(null, originIsWhitelisted);
    },
    credentials: true
};
app.use(cors(corsOptions));

Answer 2

我使用cors并实现它，这非常简单

var cors=require('cors');

app.use(cors({origin:true,credentials: true}));

Answer 3

您还需要在标头中允许OPTIONS方法。

我有这个用于cors的中间件：

module.exports = function (req, res, next) {
    // CORS headers
    res.header("Access-Control-Allow-Origin", "YOUR_URL"); // restrict it to the required domain
    res.header("Access-Control-Allow-Methods", "GET,PUT,POST,DELETE,OPTIONS");
    // Set custom headers for CORS
    res.header("Access-Control-Allow-Headers", "Content-type,Accept,X-Custom-Header");

    if (req.method === "OPTIONS") {
        return res.status(200).end();
    }

    return next();
};

PS。您获得的错误是由于跨源请求的工作原理。长话短说，浏览器可能会首先使用方法pre-flight发送OPTIONS请求，以获取允许的来源，标题和方法。因此，对于此请求，您应该只返回Access-Control-*标头。如果pre-flight正常，浏览器将继续原始请求。

您可以找到更多信息here。

Answer 4

显然cors模块没有工作。

使用上面给出的提示我使用了以下代码：

  if (req.method === "OPTIONS") {
    res.header('Access-Control-Allow-Origin', req.headers.origin);
  } else {
    res.header('Access-Control-Allow-Origin', '*');
  }

这就是诀窍。

Answer 5

遇到同样的问题并且偶然发现了大约一个小时，解决方案实际上很简单，只需为preflight operations启用CORS

app.options('*', cors()); // include before other routes

Answer 6

我以为我以前已经破解了这个密码，但是一旦我从IIS换回IIS Express，我又开始收到错误消息！

再次进入Google并尝试了许多建议，包括上述建议，但直到我从Melvin's Web Stuff - Enable CORS IIS Express找到这篇建议以下内容的建议后，这些建议均无济于事：

将以下两行添加到<customHeaders>部分下的<httpProtocol>部分：

<add name="Access-Control-Allow-Origin" value="*" />
<add name="Access-Control-Allow-Headers" value="Content-Type" />

到位于以下位置的applicationhost.config：

%HOMEPATH%\Documents\IISExpress\config

最终结果应如下所示：

<httpProtocol>
   <customHeaders>
      <clear />
         <add name="X-Powered-By" value="ASP.NET" />
         <add name="Access-Control-Allow-Origin" value="*" />
         <add name="Access-Control-Allow-Headers" value="Content-Type" />   
   </customHeaders>
   <redirectHeaders>
      <clear />
   </redirectHeaders>
</httpProtocol>

这对我来说很好用，但是请注意，在IIS中运行时，我不需要上面的内容。

Answer 7

您还必须考虑您的预检请求。我建议你在你的项目中添加“cors”npm 包，并使用以下配置启动它：

const cors = require('cors');

app.use(cors({
    credentials: true,
    preflightContinue: true,
    methods: ['GET', 'POST', 'PUT', 'PATCH , 'DELETE', 'OPTIONS'],
    origin: true
});

这将为使用所列方法的任何地址启用跨源请求。 origin 参数非常灵活，例如可以分隔一组地址、所有地址或通过正则表达式。这是包文档：

https://expressjs.com/en/resources/middleware/cors.html

让express server接受CORS请求

7 个答案: