同源策略以及解决跨域问题方案

作者: Timeless 更新时间: 阅读量: 84

同源

同源就是协议、域名和端口号相同

比如 http://www.example.com  端口是80

http://www.example.com/dist/app.js                 成功           协议、域名、端口都相同

http://www.example.com:8020/dist/app.css      失败           协议、域名相同,端口不同

http://cos.example.com/dist/vue.js                    失败           协议、端口相同,主域名相同,子域名不同

https://www.example.com/dist/app.css             失败           主机、域名相同,协议不同

同源策略是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源。

跨域

受前面所讲的浏览器同源策略的影响,不是同源的脚本不能操作其他源下面的对象。

解决跨域问题

1.png

JSONP跨域

向服务器发送请求,请求地址后面加上查询字符串,通过callback参数指定回调函数的名字

采用jsonp跨域也存在问题:
1. 使用这种方法,只要是个网站都可以拿到b.com里的数据,存在安全性问题。需要网站双方商议基础token的身份验证,这里不详述。
2. 只能是GET,不能POST。
3. 可能被注入恶意代码,篡改页面内容,可以采用字符串过滤来规避此问题。

CORS

CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)。

CORS需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能,IE浏览器不能低于IE10。对于开发者来说,CORS通信与同源的AJAX通信没有差别,代码完全一样。浏览器一旦发现AJAX请求跨源,就会自动添加一些附加的头信息,有时还会多出一次附加的请求。因此,实现CORS通信的关键是服务器。只要服务器实现了CORS接口,就可以跨源通信。 

1、Apache httpd.conf跨域配置

首先编辑httpd.conf

找到这行

#LoadModule headers_module modules/mod_headers.so

把#注释符去掉

LoadModule headers_module modules/mod_headers.so

目的是开启apache头信息自定义模块

然后在独立资源域名

<VirtualHost _default_:80>
DocumentRoot "D:\phpStudy\PHPTutorial\WWW\example"
    ServerName www.example.com
    ServerAlias example.com
  <Directory "D:\phpStudy\PHPTutorial\WWW">
    Options FollowSymLinks ExecCGI
      AllowOverride All
      Order allow,deny
      Allow from all
     Require all granted
     #这里加入~~~~~~~~~~~~~
  </Directory>
</VirtualHost>

允许所有域名共享

Header set Access-Control-Allow-Origin *

指定域名共享,这里要用add而不是set,否则只有最后一行生效,其它多域名的可以了解一下正则表达式,我就没有深入研究~

Header add Access-Control-Allow-Origin "http://www.b.com"  
Header add Access-Control-Allow-Origin "http://www.c.com"

2、htaccess下配置跨域的方法

<IfModule mod_headers.c>
    Header add Access-Control-Allow-Origin "*"
</IfModule>
<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin: " 
</IfModule>

指定多个域名,用add好像不可以,我也不是很懂,有了解的童鞋可以直接在文章底部留言哈

3、php配置

<?php
    //允许全部
    header('Access-Control-Allow-Origin:*');
    //指定域名
    header('Access-Control-Allow-Origin:http://www.example.com');
?>

4、nginx请求转发

修改nginx.conf的server

location / {
    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Credentials' 'true';
    add_header 'Access-Control-Allow-Methods' '*';
    proxy_pass http://localhost:8088;# proxy_redirect off ;index index.php index.html index.htm;
}