静态跨域问题解决：nginx+express+fontface下访问字体cors
2020-02-06 12:11:44   点击：

在用react本地开发环境时，将fontface的import加载修改到document.ejs加载时，发现需要跨域加载对应字体时，请求报错cors出现该问题。

报错信息：常见的cross-origin报错。

首先考虑从express解决。

express的公共目录由express.static提供，修改后结果如下：

var options = {
    setHeaders(res, path, stat) {
        res.set("Access-Control-Allow-Origin", "*");
        res.set("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With");
        res.set("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
    }
};
app.use(express.static('public', options));

通常这样就可以了。

 

本例中未生效。结合nodejs测试，估计静态请求未通过express。

于是去检查Nginx,果然:

nginx">        location /static {
                alias /var/xxx/static;
        }

在location中增加一行：

nginx"> add_header Access-Control-Allow-Origin *;

解决。