跨域 解决办法:利用 Access-Control-Allow-Origin

版权声明:如果喜欢,就收藏吧 O(∩_∩)O~ https://blog.csdn.net/caseywei https://blog.csdn.net/caseywei/article/details/89408580

传统的跨域请求没有好的解决方案,无非就是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 单个域名设置:

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: *");

猜你喜欢

转载自blog.csdn.net/caseywei/article/details/89408580