什么是CORS#
CORS遇到CORS问题#
浏览器访问博客时，Giscus不显示，F12打开调试界面看到的Giscus资源链接访问返回了403，提示信息的意思是“缺少Access-Control-Allow-Origin"字段，这是跨域访问CORS限制问题，我们只需要增加"Access-Control-Allow-Origin"头信息到Nginx配置中，这样在访问
位于“https://img.shields.io/github/watchers/hexojs/hexo?style=social&label=watchers”的资源因其 Cross-Origin-Resource-Policy 头内容（或缺少该头）而被拦截。详见 https://developer.mozilla.org/docs/Web/HTTP/Cross-Origin_Resource_Policy_(CORP)#
在/static目录下创建headers.toml文件，内容如下：
toml
1
2
3
4
5
6
| # custom header fields
["*"]
cache-control = "max-age=3600"
referrer-policy = "no-referrer"
strict-transport-security = "max-age=31536000; includeSubDomains"
Access-Control-Allow-Origin: *
|
重新生成站点文件，问题解决。
本站使用Nginx作为服务端，只需要在配置中添加如下配置头：
nginx
1
| add_header Access-Control-Allow-Origin *;
|
重新加载Nginx : systemctl reload nginx ，CORS问题解决了。
参考启用CORS配置如下:
nginx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
| #
# Wide-open CORS config for nginx
#
location / {
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
#
# Custom headers and headers various browsers *should* be OK with but aren't
#
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
#
# Tell client that this pre-flight info is valid for 20 days
#
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type' 'text/plain; charset=utf-8';
add_header 'Content-Length' 0;
return 204;
}
if ($request_method = 'POST') {
add_header 'Access-Control-Allow-Origin' '*' always;
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range' always;
add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range' always;
}
if ($request_method = 'GET') {
add_header 'Access-Control-Allow-Origin' '*' always;
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range' always;
add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range' always;
}
}
|
内容安全策略CSP（Content-Security-Policy）#
内容安全策略通过 HTTP 响应标头传递，与HSTS非常相似，并定义了浏览器只加载的已批准内容源。SCP可以有效防止跨站点脚本 (XSS) 攻击，并且得到广泛支持并且通常易于部署。
CSP 常用指令值#
所有以-src结尾的指令都可以用一下的值来定义过滤规则,多个规则之间可以用空格来隔开
| 值 | demo | 说明 |
|---|
| * | img-src * | 允许任意地址的url,不包括 blob: filesystem: schemes. |
| ‘none’ | object-src ‘none’ | 所有地址的咨询都不允许加载 |
| ‘self’ | script-src ‘self’ | 同源策略,即允许同域名同端口下,同协议下的请求 |
| data: | img-src ‘self’ data: | 允许通过data来请求咨询 比如用Base64、SVG |
| domain.example.com | img-src domain.example.com | 允许特性的域名请求资源 |
| *.example.com | img-src *.example.com | 允许从 example.com下的任意子域名加载资源 |
| https://cdn.com | img-src https://cdn.com | 仅允许通过https协议来从指定域名下加载资源 |
| https: | img-src https: | 只允许通过https协议加载资源 |
| ‘unsafe-inline’ | script-src ‘unsafe-inline’ | 允许行内代码执行 |
| ‘unsafe-eval’ | script-src ‘unsafe-eval’ | 允许不安全的动态代码执行，JavaScript的 eval()方法 |
locales问题#
TypeError: locales[locale] is undefined