Header中使用CORS限制或允许站点之间的资源共享。
主流的浏览器均支持CORS (Cross-Origin Resource Sharing) header,下图为浏览器提供的支持情况。
默认情况下,浏览器通过脚本限制跨域http请求。而且,CORS可以方便的在其他web应用程序上重用公共资源,配置完成之后,它会引导浏览器去指定的来源加载应用程序。
下面描述下服务器端常见的6种CORS headers的配置。
1Access-Control-Allow-Origin
目前最受欢迎的一种配置方式,它告诉浏览器在允许的来源上进行资源的加载,支持通配符(*),使用了通配符后,则允许任何来源域均可加载资源。当然也是支持配置特定来源的请求。
Apache
在 http.conf 种加入以下的配置,或者其他您在用的配置文件中。
Header set Access-Control-Allow-Origin "*"
加完配置后重启测试下,你可以看到以下的相应。
当然,你如果只想允许指定的来源访问(如https://wzcoder.com)你可以按照下面的设置。
Header set Access-Control-Allow-Origin "https://wzcoder.com"
Nginx
下面是Nginx中配置只允许http://wzcoder.com来源的请求加载。配置加在 nginx.conf 的 server 区块中。或者你当前在用的其他配置文件中。
add_header Access-Control-Allow-Origin "https://wzcoder.com";
2Access-Control-Allow-Methods
浏览器可以启动一个或多个HTTP方法来访问资源。 例如:—— GET,PUT,OPTIONS,PUT,DELETE,POST
Apache
只允许GET/POST
Header add Access-Control-Allow-Methods "GET, POST"
Nginx
比如我们需要加入DELETE和OPTIONS方法,你可以这么来修改配置
add_header Access-Control-Allow-Methods "DELETE, OPTIONS";
重启完服务后,我们在浏览器的网络中可以看到如下的内容
3Access-Control-Allow-Headers
以下的headers在安全列表中,默认情况你不需要去调整他们。
-
Content-Type
-
Accept
-
Content-Language
-
Accept-Language
当然,你也可以按照需求自定义一个或者多个自定义的header
Apache
比如你在响应中加入一个X-Custom-Header和X-Powered-By。
Header always set Access-Control-Allow-Headers "X-Custom-Header, X-Powered-By"
重启服务后,你可以看到这样的响应头。
Nginx
add_header Access-Control-Allow-Headers "X-Custom-Software, X-My-Custom";
4Access-Control-Expose-Headers
下面的headers是默认加载的安全列表,一般不需要修改,当然,同样支持自定义扩展。
-
Expires
-
Pragma
-
Cache-Control
-
Last-Modified
-
Content-Language
-
Content-Type
apache
可以使用通配符放开所有的headers
Header always set Access-Control-Expose-Headers "*"
PS: 通配符仍不会公开Authorization这个header,如果需要,则需要明确提及。
Header always set Access-Control-Expose-Headers "Authorization, *"
得到如下的结果
Nginx
假如你想开放Origin这个header
add_header Access-Control-Expose-Headers "Origin";
5Access-Control-Max-Age
你知道么,浏览器是可以缓存Access-Control-Allow-Headers 和 Access-Control-Allow-Methods中的数据的。在firefox中可以缓存24小时,chrom中是2小时(76+),如果你想禁用缓存,那么把对应的值设置成-1
Apache
缓存15分钟的配置,这边的值单位是秒。
Header always set Access-Control-Max-Age "900"
Nginx
add_header Access-Control-Max-Age "3600";
配置完后重启服务即可生效。
6Access-Control-Allow-Credentials
这个只有一个参数,那就是“TRUE”,这个是是否允许公司凭证,比如Cookies,TLS证书,authorization。
Apache
Header always set Access-Control-Allow-Credentials "true"
nginx
add_header Access-Control-Allow-Credentials "true";
总结
以上介绍希望能帮到网站小程序建设过程中,让apache和nginx服务器启用CORS,以便更好的提高应用的安全性。
内容源于网络,如有侵权或违规我们会尽快整改