网站小程序开发启用Apache和Nginx的CORS

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，以便更好的提高应用的安全性。

更多网站运维知识，网站建站支持，请关注我们网站。我司提供专业的服务器代运维服务。为您的企业信息化保驾护航！