AJAX跨域轻松配置nginx允许多个域名跨域访问

极客时间 2017-11-24 19:13:43

什么是跨域

跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。所谓同源是指，域名，协议，端口相同。浏览器执行javascript脚本时，会检查这个脚本属于那个页面，如果不是同源页面，就不会被执行。同源策略的目的，是防止黑客做一些做奸犯科的勾当。比如说，如果一个银行的一个应用允许用户上传网页，如果没有同源策略，黑客可以编写一个登陆表单提交到自己的服务器上，得到一个看上去相当高大上的页面。黑客把这个页面通过邮件等发给用户，用户误认为这是某银行的主网页进行登陆，就会泄露自己的用户数据。而因为浏览器的同源策略，黑客无法收到表单数据。

我们在开发的过程很容易遇到跨域的问题，下面用nginx 配置解决nginx 多域名跨域的问题

当浏览器发起Ajax请求到其他域名时,会出现跨域的问题,在nginx上的解决方案是配置Access-Control-Allow-Origin来解决,但是当我们需要允许多个域名跨域访问时却不好配置,可以用map来实现

map $http_origin $other_domain {  
default 0; 
"~http://1.nbwiki.com" http://1.nbwiki.com; 
"~http://2.nbwiki.com" http://2.nbwiki.com; 
"~http://3.nbwiki.com http://3.nbwiki.com; 
}
server{
listen 80;
server_name www.nbwiki.com;
root /nginx;
location /{
concat on;
concat_max_files 20;
add_header Cache-Control 
"public, max-age=3600";
}
location ~* .(ttf|ttc|otf|eot|woff|font.css)
$ {add_header Access-Control-Allow-Origin $other_domain;}
}

上面讲的是如何实现多个域名跨域，如果需要允许所有域名跨域的看直接写 * 星号就好了

add_header Access-Control-Allow-Origin *;