浏览器 ->网站 -> API 服务器的 CORS 设置

Question

我目前运行两个站点，一个基于PHP，一个基于节点.js。 node.js版本是api，所以我们称之为"api.com">

php站点(php.com)是基于HTML/JS角度的可视化站点"php.com"，它使用角度资源POST调用"api.com"。

所以一切都很好，直到最近我开始出现此错误。

MLHttpRequest cannot load https://api.com/create. 
Response to preflight request doesn't pass access control check: 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://php.com' is therefore not allowed access. 
The response had HTTP status code 400.

所以有几点需要注意。 api.com 来自一个HTTPS站点，其中As php是HTTP。

在节点.js restify api.com 站点中，它正在执行我认为 CORS 支持所必需的操作。

// Allow CORS since other sites may be calling this
server.use(
function crossOrigin(req,res,next){
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept" ); // was "X-Requested-With"
return next();
}
);

但是，它似乎仍然给出相同的CORS错误。 我是这个 CORS 东西的新手，所以不确定是 PHP 服务器还是节点服务器需要发出标头以允许此调用发生？

为了理智起见，我尝试将以下内容添加到 php.com .htaccess 文件中......

Header set Access-Control-Allow-Origin "*"

但仍然没有运气。 对正在发生的事情以及如何正确执行此操作感到非常困惑。 我很确定这是我犯的一个简单错误，因此非常感谢任何建议来解释如何

浏览器 (Chrome) -> Web 服务器 (php.com)> API 服务器 (node.js) **

以及哪个服务器应该发送 CORS 标头

Answer 1

Restify内置了一个CORS插件。 从文档中：

server.use(restify.CORS({
origins: ['https://foo.com', 'http://bar.com', 'http://baz.com:8081'],   // defaults to ['*']
credentials: true,                 // defaults to false
headers: ['x-foo']                 // sets expose-headers
}));

Answer 2

使用 server.opts 方法为 OPTIONS 请求创建自己的处理程序。下面是您可以使用的示例。

还要告诉我，在从浏览器发出请求时，您是否使用设置凭据标志为 true。在这种情况下，此句柄必须使用访问 cookie 进行响应。

在下面的示例中，我返回了完全匹配的允许原点。您也可以将其调整为子字符串匹配。但始终返回在响应标头"访问控制-允许源"的请求标头源中找到的确切值。这是一个很好的做法。

server.opts('/api/(.)*', (req, res) => {
const origin = req.header('origin');
const allowedOrigins = ['example.com', 'example.org'];
if (allowedOrigins.indexOf(origin) === -1) {
//origin is not allowed
return res.send(405);
}
//set access control headers to allow the preflight/options request
res.setHeader('Access-Control-Allow-Origin', header);
res.setHeader('Access-Control-Allow-Headers', 'Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version');
res.setHeader('Access-Control-Allow-Methods', 'GET,POST,PUT,PATCH,DELETE,OPTIONS');
// Access-Control-Max-Age header catches the preflight request in the browser for the desired
// time. 864000 is ten days in number of seconds. Also during development you may want to keep

// this number too low e.g. 1.
res.setHeader('Access-Control-Max-Age', 864000);
return res.send(200);
});