Nginx跨域的问题解决方案

·  阅读 794

跨域请求的问题是一个很常见的问题,有很多解决方案。这里主要介绍的是通过配置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等验证信息
分类:
前端
标签:
分类:
前端
标签: