跨域问题

什么是跨域

从一个域名的网页去请求另一个域名的资源，比如从www.baidu.com 页面去请求 www.google.com 的资源。它是由浏览器的同源策略造成的，所谓同源是指域名，协议，端口均相同。主域名和子域名是不同，localhost和127.0.0.1虽然都指向本机，但也属于跨域。
由于同源策略的限制，XmlHttpRequest（XMLHttpRequest 是 AJAX 的基础）只允许请求当前源（域名、协议、端口）的资源。

为什么浏览器要限制跨域访问

跨域限制主要是出于安全方面考虑。比如：

• 用户访问www.bank.com ，登陆并进行网银操作，这时cookie重要数据都生成并存放在浏览器。
• 用户有一天访问了恶意网站，恶意网站就可以在它的页面中，拿到银行的cookie，比如用户名，登陆token等。然后发起对www.bank.com 的操作。
• 这时浏览器不予限制，银行也没有做响应的安全处理的话，那么用户的信息有可能就这么泄露了。

常见的场景

• 多个系统的页面由纯HTML等静态文件组成，并且有单独的域名。后台数据接口共享，且有单独域名。那么前端ajax访问后端接口就存在跨域问题。
• 前端人员在开发阶段调试后端接口时。

跨域问题解决方法

• 输出json的同时给Response增加一个Header头，开启允许跨域请求就可以完美的解决该问题。

Response.AddHeader("Access-Control-Allow-Origin", "www.baidu.com");

• Nginx配置

    location / {
                index index.html;   
  
# set single origin
if ($http_origin ~* ^(http|https)?://(m|wx|www)\.jingdong\.(com|cn)$) {
    set $ACAO $http_origin;
}
add_header 'Access-Control-Allow-Origin' '$ACAO';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Max-Age' 86400;             

           proxy_redirect off;  
           proxy_set_header Host $host;  
           proxy_set_header X-Real-IP $remote_addr;  
           proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
           client_max_body_size  15m;
           client_body_buffer_size 10m;

        }