跨域请求的解决办法:使用Access-Control-Allow-Origin

馋奶兔 提交于 2020-01-26 14:42:00

传统的跨域请求没有好的解决方案,无非就是jsonp和iframe,随着跨域请求的应用越来越多,W3C提供了跨域请求的标准方案(Cross-Origin Resource Sharing)。IE8、Firefox 3.5 及其以后的版本、Chrome浏览器、Safari 4 等已经实现了 Cross-Origin Resource Sharing 规范,实现了跨域请求。

在服务器响应客户端的时候,带上Access-Control-Allow-Origin头信息。

Access-Control-Allow-Origin 所有域名设置:
Access-Control-Allow-Origin:*     #则允许所有域名的脚本访问该资源。

Access-Control-Allow-Origin 单个域名设置:
Access-Control-Allow-Origin:https://www.fujieace.com    #允许特定的域名访问。

Access-Control-Allow-Origin 多个域名设置:
很多人认为直接按照以下这样写就可以了,其实是错误的,因为Access-Control-Allow-Origin只允许一个值;逗号分隔多个值是行不通的。

Access-Control-Allow-Origin: https://www.google.com,https://www.baidu.com 
于是换种方式,查资料得到一个这样的思路:先自己判断域名是否是允许的,如果是再设置允许跨域访问。那么这样就可以了。Node.js多域名跨域代码如下:

app.all(‘*’, function(req, res, next) { 
if( req.headers.origin == ‘https://www.google.com’ || req.headers.origin == ‘https://www.baidu.com’ ){ 
res.header(“Access-Control-Allow-Origin”, req.headers.origin); 
res.header(‘Access-Control-Allow-Methods’, ‘POST, GET’); 
res.header(‘Access-Control-Allow-Headers’, ‘X-Requested-With’); 
res.header(‘Access-Control-Allow-Headers’, ‘Content-Type’); 

next(); 
}); 
使用时可以把允许访问的域名写成一个数组,然后JS写一个比较字符串是否在数组内的函数,这样使用就比较方便了。其中:

Access-Control-Allow-Origin 就是我们需要设置的域名。

Access-Control-Allow-Methods 是允许的请求方式。

Access-Control-Allow-Headers 跨域允许包含的头。

PHP跨域例子,只需PHP添加响应头信息:

header("Access-Control-Allow-Origin: *");

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!