Nginx跨域的问题解决方案

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

原理

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

方案

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

代码

Ajax请求(只关注URL)

1
2
3
4
5
6
7
8
9
10
get(url, options) {
return Q.Promise((resolve, reject) => {
ajax('aaaa/api', 'get', options)
.then((data) => {
resolve(data);
}, (error) => {
reject(error);
});
})
}

Nginx配置

1
2
3
4
5
6
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等验证信息