137-8593-6100
首页 服务 案例 关于 资讯 帮助 联系

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

2023/04/20  百图网络

api.png

 

Header中使用CORS限制或允许站点之间的资源共享。

 

主流的浏览器均支持CORS (Cross-Origin Resource Sharing) header,下图为浏览器提供的支持情况。

WX20191021-104408.png

默认情况下,浏览器通过脚本限制跨域http请求。而且,CORS可以方便的在其他web应用程序上重用公共资源,配置完成之后,它会引导浏览器去指定的来源加载应用程序。

下面描述下服务器端常见的6种CORS headers的配置。

 

1Access-Control-Allow-Origin

目前最受欢迎的一种配置方式,它告诉浏览器在允许的来源上进行资源的加载,支持通配符(*),使用了通配符后,则允许任何来源域均可加载资源。当然也是支持配置特定来源的请求。

Apache

http.conf 种加入以下的配置,或者其他您在用的配置文件中。

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

加完配置后重启测试下,你可以看到以下的相应。

WX20191021-105903.png

当然,你如果只想允许指定的来源访问(如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";

重启完服务后,我们在浏览器的网络中可以看到如下的内容

WX20191021-1059031.png

 

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"

重启服务后,你可以看到这样的响应头。

WX20191021-111752.png

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, *"

得到如下的结果

WX20191021-112359.png

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

内容源于网络,如有侵权或违规我们会尽快整改
在线提交您的需求
我们会在24小时内回复您,节假日除外。
微信沟通 QQ客服
扫描二维码添加客服微信