跨域及其设置方法
时间：2019-06-14 15:07:33 人气：2001
《跨域及其设置方法》一文刊发于《网络安全和信息化》2019年第6期。
一、什么是跨域？
浏览器从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，都被视为跨域访问，也就是浏览器对于javascript的同源策略的限制。所谓同源策略，即请求的url地址，必须与浏览器上的url地址处于同域上，也就是域名，端口，协议都必须相同。例如a.com下面的js不能调用b.com中的js、对象或数据。
下面的几种情况均属于跨域访问。
域名不同：
主域名不同:
http://www.qhdedu.com/index.html访问http://www.qhdedu.net/1.js
子域名不同:
http://www.qhdedu.com/index.html访问http://w3.qhdedu.com/1.js
域名和域名ip:
http://www.qhdedu.com/index.html访问http://106.75.53.220/1.js
端口不同：
http://www.qhdedu.com:8080/index.html访问http://www.qhdedu.com:8081/1.js
协议不同：
http://www.qhdedu.com:8080/index.html访问https://www.qhdedu.com:8080/1.js
允许跨域访问会带来许多安全性的问题，比如一般用于状态控制的cookie，常用于存储登录的信息，如果不禁止跨域访问，那么别的网站只需要一段脚本就可以获取你的cookie，从而冒充你的身份去登录网站，造成非常严重的安全问题。因此，浏览器均推行同源策略，各种WEB服务器也默认禁止跨域访问，要想网站允许跨域访问，还需要进行相关的设置。
二、跨域的设置
1、IIS的设置：
打开IIS，找到并点击“HTTP响应标头”，在右侧可就以看到“添加”，然后添加如下标头即可：
Access-Control-Allow-Origin：*
Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS
Access-Control-Allow-Headers：Content-Type, api_key, Authorization
图1 IIS中HTTP响应头
或者直接在Web.config配置文件中写入：
<configuration>
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
<add name="Access-Control-Allow-Methods" value="GET,PUT,POST,DELETE,OPTIONS" />
<add name="Access-Control-Allow-Headers" value="Content-Type,Accept" />
</customHeaders>
</httpProtocol>
</system.webServer>
</configuration>
其中，Access-Control-Allow-Origin表示请求来源，“*”表示不限定即允许任何域名访问；Access-Control-Allow-Methods表示请求方法；Access-Control-Allow-Headers表示请求消息头。
2、Apache的设置：
首先在配置文件httpd.conf中找到下面这行，并把#注释符去掉，以开启Apache头信息自定义模块。
#LoadModule headers_module modules/mod_headers.so
然后修改站点的配置文件：
<Directory "/home/wwwroot/php.qhdedu.net">
AllowOverride None
Require all granted
Header set Access-Control-Allow-Origin *
</Directory>
Header set Access-Control-Allow-Origin *行末的“*”表示允许所有的域名访问，当然这是很危险的，较为安全的配置，应该是直接指定具体的域名。如果直接指定具体的域名，那么就要用Header add而不是Header set，否则只有最后一行的配置生效:
<Directory "/home/wwwroot/php.qhdedu.net">
AllowOverride None
Require all granted
Header add Access-Control-Allow-Origin "poms.qhdedu.net"
Header add Access-Control-Allow-Origin "wg.qhdedu.net"
</Directory>
设置后需要重启Apache生效。
3、Nginx的设置：
Nginx也是通过配置Access-Control-Allow-Origin来解决跨域问题，但是此参数只允许配置单个域名“add_header Access-Control-Allow-Origin www.qhdedu.com”或者“add_header Access-Control-Allow-Origin *”允许全部域名，如果需要允许多个域名跨域访问时可以用map来实现，具体配置代码如下：
map $http_origin $corsHost {
default 0;
"~http://w1.qhdedu.com" http://w1.qhdedu.com;
"~http://w2.qhdedu.com" http://w2.qhdedu.com;
"~http://w3.qhdedu.com" http://w3.qhdedu.com;
}
server
{
listen 80;
server_name www.qhdedu.com;
root /nginx;
location /
{
add_header Access-Control-Allow-Origin $corsHost;
add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept";
add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
}
}
第二种方式：
location ~* .(ttf|ttc|otf|eot|woff|font.css)$ {
if ($http_origin = 'http://w1.qhdedu.com') {
add_header 'Access-Control-Allow-Origin' "$http_origin";
}
if ($http_origin = 'http://w2.qhdedu.com') {
add_header 'Access-Control-Allow-Origin' "$http_origin";
}
if ($http_origin = 'http://w3.qhdedu.com') {
add_header 'Access-Control-Allow-Origin' "$http_origin";
}
}
