Nginx跨域的问题解决方案

跨域请求的问题是一个很常见的问题，有很多解决方案。这里主要介绍的是通过配置Nginx实现跨域请求。

原理

浏览器同源策略是为了保护用户的安全，防止一些简单的黑客行为。跨域规则搜一下，很多答案。今天说的这种Nginx跨域方案是通过Nginx的反向代理，欺骗浏览器，让浏览器以 为是同源调用。

方案

我们假设应用的域名是aaaa,要请求bbbb上提供的接口服务。bbbb上服务的url是bbbb/api。这时，我们在aaaa上发起aaaa/api的请求，用nginx拦截这个请求，将其发送到bbbb/api。完成请求过程。

代码

Ajax请求(只关注URL)

get(url, options) {
    return Q.Promise((resolve, reject) => {
      ajax('aaaa/api', 'get', options)
        .then((data) => {
          resolve(data);
        }, (error) => {
          reject(error);
        });
    })
  }
复制代码

Nginx配置

location ~ ^/api {
  proxy_pass http://bbbb;
  proxy_redirect          off; 
  proxy_set_header        X-Real-IP       $remote_addr; 
  proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for; 
}
复制代码

优点

• 兼容性极佳，能适用所有的浏览器
• 成本低，服务端无需额外配置，前端代码也无需修改
• 节约服务器的性能
• 能携带Session，无需额外配置cookie等验证信息